79-百度地图H5提供了geolocation获取地理位置使用百度地图百度开放平台注册称为开发者(类型选择个人)

H5提供了geolocation获取地理位置

使用百度地图

百度开放平台
注册称为开发者(类型选择个人)

AK密钥申请

进入【控制台】-【应用管理】-【我的应用】
点击【创建应用】进入AK申请页面，填写应用名称，务必选择AK类型为“浏览器端”，JS API只支持浏览器端AK进行请求与访问。配置白名单

地图使用步骤

进入【开发文档】-【javascript API】

创建地图基础代码

<body>  
    <!-- 1.放置地图的容器 -->  
    <div id="container"></div>   
    <!-- 2.在线引入百度API文件 -->  
    
    <script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=您的密钥">   
    </script>  
    <!-- 使用百度地图 -->  
    <script>   
        //1. 创建地图实例 参数为容器的id名    
        var map = new BMapGL.Map("container");   
        //2. 创建中心点 参数为经度和维度     
        var point = new BMapGL.Point(116.404, 39.915);   
        //3. 初始化地图 参数为中心点和地图级别  地图级别数字越小表示看到范围越广，效果越粗略      
        map.centerAndZoom(point, 15);     
        //4. 将vscode作为服务器打开 
    </script>
</body>

使用

添加覆盖物

//将当前放置点坐标作为地图中心位置
let marker = new BMapGL.Marker(point)
map.addOverlay(marker)

// 控制当前点可拖拽
marker.enableDragging()
//设置点可拖拽 dragend 拖拽结束触发事件
marker.addEventListener("dragend",function(event){    
    console.log(event.latLng);   
    //设置中心点位置  
    let centerPoint = new BMapGL.Point(event.latLng.lng, event.latLng.lat);    
    //地图初始化中心点 
    map.centerAndZoom(centerPoint, 15);
 })

地址正/逆解析
路径规划
定位