文档章节

HTML5调用百度地图API进行地理定位实例

Delete90
 Delete90
发布于 07/12 17:54
字数 401
阅读 13
收藏 0

测试有个bug,pc端没有app端精确

 

<!DOCTYPE html>  
<html>  
<title>HTML5调用百度地图API进行地理定位实例</title>  
    <head>  
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />  
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=134db1b9cf1f1f2b4427210932b34dcb"></script>  
    </head>  
    <body style="margin:50px 10px;">  
        <div id="status" style="text-align: center"></div>  
        <div style="width:600px;height:480px;border:1px solid gray;margin:30px auto" id="container"></div>  
    </body>  
</html>  
  
<script type="text/javascript">  
    //默认地理位置设置为北京
    var x=116.404269,y=39.916706;   
    window.onload = function() {  
        if(navigator.geolocation) {  
            navigator.geolocation.getCurrentPosition(showPosition);
            document.getElementById("status").innerHTML = "HTML5 Geolocation is supported in your browser.";  
                // 百度地图API功能  
                var map = new BMap.Map("container");  
                var point = new BMap.Point(x,y);  
                map.centerAndZoom(point,12);  
  
                var geolocation = new BMap.Geolocation();  
                geolocation.getCurrentPosition(function(r){  
                    if(this.getStatus() == BMAP_STATUS_SUCCESS){  
                        var mk = new BMap.Marker(r.point);  
                        map.addOverlay(mk);  
                        map.panTo(r.point);  
                    }  
                    else {  
                        alert('failed'+this.getStatus());  
                    }          
                },{enableHighAccuracy: true})  
            return;
        }  
        alert("你的浏览器不支持获取地理位置!");
    };  
    function showPosition(position){
      x=position.coords.latitude; 
      y=position.coords.longitude;  
    }
</script>  

 

 

简单版:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>地理定位</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
     
</head>
<body>
<script>
    //获取当前地理信息
    window.navigator.geolocation.getCurrentPosition(success,error);
   //获取地理信息成功时的回调函数
    function success(position) {
        alert("成功获取您的地理信息");
        //获取经度维度信息
        //coords属性
        var latitude = position.coords.latitude;
        var longitude = position.coords.longitude;
        //打印纬度,经度信息
       alert(latitude);
       alert(longitude)
    }
    //获取地理信息失败时的回调函数
    function error(msg) {
        alert("获取您的地理信息失败");
    }
</script>
</body>
</html>

 

© 著作权归作者所有

共有 人打赏支持
Delete90
粉丝 2
博文 46
码字总数 31939
作品 0
程序员
HTML5编程之旅 第1站 Geolocation

HTML5 Geolocation 初探 让我们假设这样一个场景,有一个web应用程序,它可以向用户提供附近不远处某商场的打折优惠信息。使用HTML5 Geolocation API(地理定位API),可以请求用户共享他们的...

倪伟伟
2014/02/24
0
0
php利用百度地图API进行IP定位和GPS定位

最近在做一个手机端的webapp地图应用,而核心内容当然是定位了,但是定位的话有几种方式,IP定位,GPS定位,基站定位(这个貌似webapp用不了), 那么剩下核心的gps定位和ip定位了,我们知道,...

xialeistudio
2015/01/12
0
3
html5如何利用百度地图快速的定位经纬度

定位功能(Geolocation)是HTML5的新特性,因此只有在支持HTML5的现代浏览器上运行,特别是手持设备如iphone,地理定位更加精确。首先我们要检测用户设备浏览器是否支持地理定位,如果支持则...

燚轩科技
05/14
0
0
HTML5 从基础学习之二 --Canvas Geolocation Cache

HTML5 的canvas元素使用JavaScript在网页上绘制图像 其拥有多种绘制路径,矩形,圆形,字符以及添加图像的方法。 1、Canvas元素的创建(规定元素的id,宽度和高度) <canvas id="myCanvas" ...

Drealin
2012/09/07
0
0
HTML5 Geolocation API和Google Maps API结合实现路线导航

HTML5提供了地理位置定位功能(Geolocation API),能确定用户位置,我们可以借助HTML5的该特性开发基于地理位置信息的应用。本文结合实例给大家分享如何使用HTML5,借助百度、谷歌地图接口来...

iNiL0119
2016/09/14
103
0

没有更多内容

加载失败,请刷新页面

加载更多

如何通过 J2Cache 实现分布式 session 存储

做 Java Web 开发的人多数都会需要使用到 session (会话),我们使用 session 来保存一些需要在两个不同的请求之间共享数据。一般 Java 的 Web 容器像 Tomcat、Resin、Jetty 等等,它们会在...

红薯
今天
3
0
C++ std::thread

C++11提供了std::thread类来表示一个多线程对象。 1,首先介绍一下std::this_thread命名空间: (1)std::this_thread::get_id():返回当前线程id (2)std::this_thread::yield():用户接口...

yepanl
今天
3
0
Nignx缓存文件与动态文件自动均衡的配置

下面这段nginx的配置脚本的作用是,自动判断是否存在缓存文件,如果有优先输出缓存文件,不经过php,如果没有,则回到php去处理,同时生成缓存文件。 PHP框架是ThinkPHP,最后一个rewrite有关...

swingcoder
今天
2
0
20180920 usermod命令与用户密码管理

命令 usermod usermod 命令的选项和 useradd 差不多。 一个用户可以属于多个组,但是gid只有一个;除了gid,其他的组(groups)叫做扩展组。 usermod -u 1010 username # 更改用户idusermod ...

野雪球
今天
3
0
Java网络编程基础

1. 简单了解网络通信协议TCP/IP网络模型相关名词 应用层(HTTP,FTP,DNS等) 传输层(TCP,UDP) 网络层(IP,ICMP等) 链路层(驱动程序,接口等) 链路层:用于定义物理传输通道,通常是对...

江左煤郎
今天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部