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

最新推荐文章于 2024-09-18 15:12:56 发布

原创

最新推荐文章于 2024-09-18 15:12:56 发布 · 1.8k 阅读

收录于

本文介绍了如何在H5页面中利用百度地图API获取手机GRS定位，详细步骤包括在百度地图开放平台注册获取API key，并展示了相关的地图标注代码实现。

在项目中越来越多的用到了手机的GRS定位功能，使用百度地图API获取当前位置并在地图上标注出来首先应该在网站上注册key
在百度上搜索百度地图开放平台，出来下面的网站，点击打开即可
在这里插入图片描述

点击获取密钥，注册获取key
下面就可以写代码了，这里就不用vue了。

<script type="text/javascript" src="/https://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