h5页面如何调用百度地图获取当前位置(代码)


当前第2页 返回上一页

点击获取密钥,注册获取key。
完整代码如下:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<script type="text/javascript" src="

</script>

<title>百度地图的定位</title>

</head>

<body>

    <p id="allmap" style="width: 100%;height: 500px;"></p>

    <script type="text/javascript">

    // 百度地图API功能

    var map = new BMap.Map("allmap");    var point = new BMap.Point(108.95,34.27);

    map.centerAndZoom(point,12);    var geolocation = new BMap.Geolocation();

    geolocation.getCurrentPosition(function(r){console.log(r.point)       

    if(this.getStatus() == BMAP_STATUS_SUCCESS){           

    var mk = new BMap.Marker(r.point);

            map.addOverlay(mk);//标出所在地

            map.panTo(r.point);//地图中心移动

            //alert('您的位置:'+r.point.lng+','+r.point.lat);

            var point = new BMap.Point(r.point.lng,r.point.lat);//用所定位的经纬度查找所在地省市街道等信息

            var gc = new BMap.Geocoder();

            gc.getLocation(point, function(rs){

               var addComp = rs.addressComponents; console.log(rs.address);//地址信息

               alert(rs.address);//弹出所在地址

 

            });

        }else {

            alert('failed'+this.getStatus());

        }       

    },{enableHighAccuracy: true})</script></body></html>

运行结果是:
这里写图片描述

(注:用浏览器定位是不准确的,建议用手机进行测试!)

相关推荐:

HTML5调用百度地图API获取当前位置并直接导航目的地的方法

以上就是h5页面如何调用百度地图获取当前位置(代码)的详细内容,更多文章请关注木庄网络博客

返回前面的内容

相关阅读 >>

李炎恢html5视频资料分享

讲讲html5中被废弃的标签

html5标签选择方法指引

html5的地理定位如何使用

html5实现拖拽批量上传文件的代码

html5 source标签详解

html5 canvas绘制爱心的方法示例

利用h5制作一个倒计时demo的实例教程

html5页面rem布局适配方法详解

简单介绍html5中的文件导入

更多相关阅读请进入《h5》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...