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页面如何调用百度地图获取当前位置(代码)的详细内容,更多文章请关注木庄网络博客

返回前面的内容

相关阅读 >>

h5的28个新特性的详细介绍

html5 虚拟键盘出现挡住输入框怎么办

分享一个html5plus移动应用

html5返回音频/视频是否已结束的属性ended

h5中main元素的实例详解

mui框架使用html5实现二维码扫描功能

html5 video标签的属性、方法和事件汇总介绍

html5全新的网络格局

html5怎样做出图片转圈的动画效果

html5讲解之datatransfer对象

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




打赏

取消

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

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

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

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

评论

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