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各种头部meta标签的功能

html5百叶窗效果的示例代码_html5教程技巧

phonegap使用方法介绍(一)查找联系人

几个很好用的html5移动开发框架

用html5绘制折线图的实例代码

关于html5你不得不知的事

html5通过postmessage进行跨域通信的方法_html5教程技巧

基于html5陀螺仪实现移动动画效果

html5设置或返回音频/视频是否应该在结束时再次播放的属性loop

html5有哪些清空画布的方法

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




打赏

取消

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

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

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

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

评论

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