h5页面调用百度地图获取当前位置并在地图上标注出来

古城微笑少年丶 2024-04-18 09:09 82阅读 0赞

在项目中越来越多的用到了手机的GRS定位功能，使用百度地图API获取当前位置并在地图上标注出来首先应该在网站上注册key  
在百度上搜索 百度地图开放平台，出来下面的网站，点击打开即可  
![在这里插入图片描述][2019090415254739.png]  
![在这里插入图片描述][2019090415260553.png]  
点击获取密钥，注册获取key  
下面就可以写代码了，这里就不用vue了。

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的key值"></script>
    <div id="allmap" style="width: 100%;height: 500px;"></div>
    <script type="text/javascript">
        // 百度地图API功能
        var map = new BMap.Map("allmap");
        //Point类描述了一个地理坐标点，其中108.95表示经度，34.27表示纬度
        var point = new BMap.Point(108.95,34.27);
        //启用滚轮放大缩小
        map.enableScrollWheelZoom();
        // 设置中心点坐标和地图级别
       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>

[2019090415254739.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/e1039f7b996644c6b223a1f9f657933a.png
[2019090415260553.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/c768fbf972ae4acfbf383427444568a0.png

发表评论取消回复

表情：

评论列表（有 0 条评论，82人围观）

还没有评论，来说两句吧...

相关阅读

相关 h5页面调用百度地图获取当前位置并在地图上标注出来

项目中越来越多的用到了手机的GRS定位功能，使用百度地图API获取当前位置并在地图上标注出来首先应该在网站上注册key 在百度上搜索百度地图开放平台，出来下面的网站...

古城微笑少年丶/ 2024年04月18日 09:09/ 0 赞/ 83 阅读

相关百度地图API获取当前位置

异步加载获取当前位置 //百度地图API功能 function loadJScript() { var script = do

一时失言乱红尘/ 2023年10月11日 15:03/ 0 赞/ 33 阅读

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

本文主要和大家介绍了HTML5页面直接调用百度地图API获取当前位置直接导航目的地的实现代码,需要的朋友可以参考下，希望能帮助到大家。 [web前端全栈资料粉丝福利（面试题、

电玩女神/ 2023年02月18日 03:21/ 0 赞/ 11 阅读

相关百度地图API 实现地图多点标注

1.MySQL设计 2.java @RequiresPermissions("system:lmonitor:list") @PostMap

以你之姓@/ 2023年01月21日 04:26/ 0 赞/ 44 阅读

相关百度地图API调用实现获取经纬度以及标注

一、申请AK 百度搜索百度地图API，进入官网文档，按照官网文档提示注册百度账号并申请AK。[申请AK][AK] 填写相关信息，应用名称随意、应用类型根据协议来选择.

男娘i/ 2022年12月17日 15:55/ 0 赞/ 381 阅读

相关 html5网页定位当前位置,HTML5网页定位，并将位置绘在百度地图上

运行效果： ![2bdba3de0fa061786b99d09c649a8a76.png][] 实现代码： HTML5定位 \ \{ margin: 0px; padd

素颜马尾好姑娘i/ 2022年10月06日 09:47/ 0 赞/ 202 阅读

相关 Android百度地图开发之显示当前位置地图

步骤： 1、获取当前的经纬度 2、显示地图 3、改变地图中心的经纬度 -------------------- 1、获取当前的经纬度请参考网址： [

朴灿烈づ我的快乐病毒、/ 2022年09月23日 11:57/ 0 赞/ 328 阅读

相关百度地图开发示例：位置标注，标注点弹框

一、申请百度地图开发者AK 1.登录百度开放平台地址：[http://lbsyun.baidu.com/][http_lbsyun.baidu.com]，使用百度账

太过爱你忘了你带给我的痛/ 2022年05月22日 12:58/ 0 赞/ 496 阅读

相关获取百度地图

一.获取百度地图 ![20170713152245042][] 需要调用百度的js <script type="text/javascript" src="http

本是古典何须时尚/ 2021年09月13日 14:48/ 0 赞/ 865 阅读

相关百度地图标注基础篇

<script type="text/javascript"> var mapObj = new BMap.Map("mapObj");

蔚落/ 2021年09月10日 05:06/ 0 赞/ 504 阅读