前端调用百度地图API获取经纬度(详细操作)
1. 浏览器搜索百度地图开放平台
2. 创建应用
点击控制台 --> 应用管理 --> 我的应用 --> 注册账号(如果没有注册过) --> 创建应用
填写应用名称 --> 应用类型选择浏览器端 --> Referer白名单填 * --> 点击提交
回到我的应用 --> 复制访问应用（AK）
3. 使用API获取经纬度
这里使用的是百度地图v1.0
<!DOCTYPE html> <html><head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>百度地图</title> <style type="text/css"> html{height:100%} body{height:100%;margin:0px;padding:0px} #container{width: 800px;height: 600px;} /* 去掉版权显示 */.BMap_cpyCtrl {display:none;}.anchorBL{display:none;}</style> <script type="text/javascript" src="https://api./api?v=1.0&type=webgl&ak=刚刚复制的AK"></script></head> <body> <div id="container"></div><script type="text/javascript">// 创建地图实例 let map = new BMapGL.Map("container");// 创建点坐标 let point = new BMapGL.Point(116.39515671900338, 39.93181962772638);map.centerAndZoom(point, 15);//启用滚轮放大缩小，默认禁用。map.enableScrollWheelZoom(true);// 添加比例尺控件let scaleCtrl = new BMapGL.ScaleControl(); let zoomCtrl = new BMapGL.ZoomControl(); map.addControl(scaleCtrl);map.addControl(zoomCtrl);// 添加城市列表控件let cityCtrl = new BMapGL.CityListControl(); map.addControl(cityCtrl);// 添加标记点let marker = new BMapGL.Marker(point);map.addOverlay(marker);//地图单击事件map.addEventListener("click", function(e){// 清除覆盖物map.clearOverlays();// 重设标记点let point = new BMapGL.Point(e.latlng.lng, e.latlng.lat);let marker = new BMapGL.Marker(point);map.addOverlay(marker);//信息窗口配置let opts = {width: 250,// 宽度height: 100, // 高度title:'经纬度信息' //标题}let info = `当前位置经度为${e.latlng.lng}，纬度为${e.latlng.lat}`// 创建信息窗口对象let infoWindow = new BMapGL.InfoWindow(info, opts); // 打开信息窗口map.openInfoWindow(infoWindow, point); });</script> </body> </html>
4. 实现效果
5.其他功能
如果想实现其他功能，可自行阅读开发文档，注意版本之间的区别
