vue3调用百度地图标注选择位置并获取经纬度

参考了很多文章，最终结合百度文档各有采取完成地图选取经纬度。

第一步：引入百度地图，在当前需要地图的页面引入就行。

const loadMapScript = () => {// 此处在所需页面引入资源就是，不用再public/index.html中引入var script = document.createElement("script");script.type = "text/javascript";script.className = "map"; // 给script一个类名script.src ="https://api.map.baidu.com/getscript?v=3.0&ak=你的ak";// 此处需要注意：申请ak时，一定要应用类别一定要选浏览器端，不能选服务端，不然地图会报ak无效script.onload = () => {// 使用script.onload，待资源加载完成，再初始化地图init();};let mapDom= document.getElementsByClassName("map");if (mapDom) {// 每次append script之前判断一下，避免重复添加script资源标签for (var i = 0; i < mapDom.length; i++) {document.body.removeChild(mapDom[i]);}}document.body.appendChild(script);
};

在页面加载完成后执行

onmounted(()=>{loadMapScript()
})

第二步，初始化地图

     const init = () => {let Bmap = window.BMap; // 注意要带window，不然会报错（注意官方api,会有改动，之前是Bmap,后面3.0版本改为了BMap,最好查文档或者打印一下window）var map = new Bmap.Map("localtion-box"); // allmap必须和dom上的id一直var cityCtrl = new Bmap.CityListControl();  // 添加城市列表控件map.addControl(cityCtrl);map.centerAndZoom(new Bmap.Point(state.point.lng, state.point.lat),13); // 初始化地图,设置中心点坐标和地图级别map.setCurrentCity("成都");map.enableScrollWheelZoom(true);var geoc = new Bmap.Geocoder();var markervar labelvar point = new Bmap.Point(state.point.lng, state.point.lat)marker = new Bmap.Marker(point);// 创建标注geoc.getLocation(point, function (rs) {label = new Bmap.Label(`${rs.address},经度:${state.point.lng},纬度:${state.point.lat}`, {       // 创建文本标注position: state.point,                       offset: new Bmap.Size(10, -20)         })map.addOverlay(label);map.addOverlay(marker);})map.addEventListener('click', function (e) {if (marker) {map.removeOverlay(marker);}if (label) {map.removeOverlay(label);}point = new Bmap.Point(e.point.lng, e.point.lat);marker = new Bmap.Marker(point);// 创建标注geoc.getLocation(point, function (rs) {label = new Bmap.Label(`${rs.address},经度:${e.point.lng},纬度:${e.point.lat}`, {       // 创建文本标注position: point,                          // 设置标注的地理位置offset: new Bmap.Size(10, -20)           // 设置标注的偏移量})map.addOverlay(label);})map.addOverlay(marker);state.point = point});};

第三步，设置初始值

const state=reactive({point: { lng: 104.04263635868074, lat: 30.556100647961866 }
})

最后完成，其他配置参考百度地图文档

vue3调用百度地图标注选择位置并获取经纬度相关推荐

C#调用百度地图API，根据地名获取经纬度geocoding
前言公司的一个内部网站维护,需要根据地名填写经纬度,最终同echarts生成地图. 之前数据比较少,直接经纬度查询查的,https://jingweidu.bmcx.com/ 现在数据越来越多,手动 ...
java调用百度地图API依据地理位置中文获取经纬度
百度地图api提供了非常多地图相关的免费接口,有利于地理位置相关的开发,百度地图api首页:http://developer.baidu.com/map/. 博主使用过依据地理依据地理位置中文获取经纬 ...
Java调用高德地图API根据详细地址获取经纬度
Java调用高德地图API根据详细地址获取经纬度官方API:https://lbs.amap.com/api/webservice/guide/api/georegeo * Web服务API 地理/ ...
Flutter 调用百度地图APP实现位置搜索、路线规划
志在巅峰的攀登者,不会陶醉在沿途的某个脚印之中,在码农的世界里,优美的应用体验,来源于程序员对细节的处理以及自我要求的境界,年轻人也是忙忙碌碌的码农中一员,每天.每周,都会留下一些脚印,就是这些创作的 ...
使用百度地图api根据网吧名称获取经纬度信息
http://lbs.baidu.com/index.php?title=webapi/guide/webservice-geocoding 1.到百度地图获取请求连接地理编码 http://api ...
c语言api获取百度地图,H5调用百度地图API获取地理位置
//获取当前位置 var geolocation = new BMap.Geolocation(); geolocation.getCurrentPosition(function(r){ alert ...
php调用百度接口获取经纬度,利用百度API(js)，通过地址获取经纬度的注意事项...
网上给的很多答案都是这种: http://api.map.baidu.com/geocoder?address=地址&output=输出格式类型&key=用户密钥&city=城 ...
调用百度地图Api，定位到大西洋的问题
调用百度地图标注点的时候,一直都定位到大西洋,开始以为是经纬度标注的不对, 后来对比以前的调用 1 var map = new BMap.Map("map"); // 创建Map实 ...
HTML调用百度地图API，实现地图标注位置
HTML调用百度地图API,实现地图标注位置一.说明二.代码总结提示:以下是本篇文章正文内容,下面案例可供参考一.说明通过HTML调用百度地图API,在指定位置显示出地图,并且在目标位置标 ...

vue3调用百度地图标注选择位置并获取经纬度

vue3调用百度地图标注选择位置并获取经纬度

vue3调用百度地图标注选择位置并获取经纬度相关推荐

最新文章

热门文章