在Vue中使用高德地图_愿为浪漫渡此劫_vue 高德地图

未知 02-07 1457

在Vue中使用高德地图一、如何在Vue中引入基础高德地图1、步骤一：注册并登录高德地图开放平台，申请密钥2、步骤二：安装高德地图加载器3、封装一个自定义地图组件，并初始化地图二、根据关键词搜索，并定位到搜索的位置三、添加放大缩小地图、转盘四、点击地图获取经纬度五、地图上绘制标记点、圆形、曲线、矩形和多边形等,及其绘制清除六、总结

一、如何在Vue中引入基础高德地图

根据官网提示，在Web端，我们需要高德地图加载器：npm i @amap/amap-jsapi-loader -S

注意： * 此教程适用于Web端，移动端还未尝试，感兴趣的或者有需要的可单独联系我 * @amap/amap-jsapi-loader加载器npm地址

1、步骤一：注册并登录高德地图开放平台，申请密钥

高德地图开放平台操作步骤如下图：

2、步骤二：安装高德地图加载器 npm i @amap/amap-jsapi-loader -S 3、封装一个自定义地图组件，并初始化地图 <template>  <div id="bai-du-map">  </div> </template> <script> import AMapLoader from "@amap/amap-jsapi-loader"; // 设置安全密钥 window._AMapSecurityConfig = { securityJsCode: '安全密钥', } export default { data() { return { map : null, mouseTool : null, overlays : [], auto : null, placeSearch : null, } }, methods : { initMap() { AMapLoader.load({ "key": "申请好的Web端开发者Key，首次调用 load 时必填", "version": "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15 "plugins": [地图用到的插件], // 需要使用的的插件列表，如比例尺'AMap.Scale'等 }).then((AMap)=>{ // 初始化地图 this.map = new AMap.Map('bai-du-map',{ viewMode : "2D", // 是否为3D地图模式 zoom : 13, // 初始化地图级别 center : [113.65553,34.748764], //中心点坐标郑州 resizeEnable: true }); }).catch(e => { console.log(e); }); } }; </script> <style scoped> #bai-du-map { overflow: hidden; width: 100%; height: 100%; margin: 0; font-family: "微软雅黑"; } </style> <style> /* 隐藏高德logo */ .amap-logo { display: none !important; } /* 隐藏高德版权 */ .amap-copyright { display: none !important; } </style>

注意点：

2021年起，高德地图必须使用安全密钥即是

window._AMapSecurityConfig = { securityJsCode: '安全密钥', }

二、根据关键词搜索，并定位到搜索的位置 <template>  <div id="bai-du-map">  </div> </template> <script> import AMapLoader from "@amap/amap-jsapi-loader"; window._AMapSecurityConfig = { // 设置安全密钥 securityJsCode: '安全密钥', } export default { props : ["iptId"], data() { return { map : null, mouseTool : null, overlays : [], auto : null, placeSearch : null, } }, methods : { initMap() { AMapLoader.load({ "key": "密钥", // 申请好的Web端开发者Key，首次调用 load 时必填 "version": "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15 "plugins": ["AMap.AutoComplete","AMap.PlaceSearch"], // 需要使用的的插件列表，如比例尺'AMap.Scale'等 // "plugins": [], // 需要使用的的插件列表，如比例尺'AMap.Scale'等 }).then((AMap)=>{ this.map = new AMap.Map('bai-du-map',{ viewMode : "2D", // 是否为3D地图模式 zoom : 13, // 初始化地图级别 center : [113.65553,34.748764], //中心点坐标郑州 resizeEnable: true }); this.auto = new AMap.AutoComplete({ input : this.iptId // 搜索框的id }); this.placeSearch = new AMap.PlaceSearch({ map: this.map, panel: "panel", // 结果列表将在此容器中进行展示。 // city: "010", // 兴趣点城市 autoFitView: true, // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围 extensions: 'base' //返回基本地址信息 }); this.auto.on("select", this.select);//注册监听，当选中某条记录时会触发 }).catch(e => { console.log(e); }); }, select(e) { this.placeSearch.setCity(e.poi.adcode); this.placeSearch.search(e.poi.name); //关键字查询查询 } }, mounted() { this.initMap(); }, }; </script>

三、添加放大缩小地图、转盘 <template>  <div id="bai-du-map">  </div> </template> <script> import AMapLoader from "@amap/amap-jsapi-loader"; window._AMapSecurityConfig = { // 设置安全密钥 securityJsCode: '安全密钥', } export default { props : ["iptId"], data() { return { map : null, mouseTool : null, overlays : [], auto : null, placeSearch : null, } }, methods : { initMap() { AMapLoader.load({ "key": "密钥", // 申请好的Web端开发者Key，首次调用 load 时必填 "version": "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15 "plugins": ["AMap.Scale","AMap.ToolBar","AMap.ControlBar","AMap.MouseTool","AMap.MapType","AMap.HawkEye"], // 需要使用的的插件列表，如比例尺'AMap.Scale'等 // "plugins": [], // 需要使用的的插件列表，如比例尺'AMap.Scale'等 }).then((AMap)=>{ this.map = new AMap.Map('bai-du-map',{ viewMode : "2D", // 是否为3D地图模式 zoom : 13, // 初始化地图级别 center : [113.65553,34.748764], //中心点坐标郑州 resizeEnable: true }); this.map.addControl(new AMap.Scale()); // 添加左下角的比例尺 let toolBar = new AMap.ToolBar({ position: { bottom: '210px', right: '35px' } }); let controlBar = new AMap.ControlBar({ position: { bottom: '280px', right: '10px', }, }); this.map.addControl(toolBar); // 添加右下角的放大缩小 this.map.addControl(controlBar); // 方向盘 this.map.addControl(new AMap.MapType()); // 添加右上角的标准图和卫星图和路况 this.map.addControl(new AMap.HawkEye()); // 添加地图放大镜 }).catch(e => { console.log(e); }); }, }, mounted() { this.initMap(); }, }; </script> 四、点击地图获取经纬度 initMap() { AMapLoader.load({ "key": "key", // 申请好的Web端开发者Key，首次调用 load 时必填 "version": "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15 "plugins": ["AMap.Scale","AMap.ToolBar","AMap.AutoComplete","AMap.PlaceSearch","AMap.ControlBar","AMap.MouseTool"], // 需要使用的的插件列表，如比例尺'AMap.Scale'等 // "plugins": [], // 需要使用的的插件列表，如比例尺'AMap.Scale'等 }).then((AMap)=>{ // 鼠标点击获取经纬度 this.map.on('click', function(e) { console.log("经度",e.lnglat.getLng()) console.log("纬度",e.lnglat.getLat()) }); }).catch(e => { console.log(e); }); }, 五、地图上绘制标记点、圆形、曲线、矩形和多边形等,及其绘制清除 <template>  <div id="bai-du-map">  </div> </template> <script> import AMapLoader from "@amap/amap-jsapi-loader"; window._AMapSecurityConfig = { // 设置安全密钥 securityJsCode: '安全密钥', } export default { data() { return { map : null, mouseTool : null, overlays : [], auto : null, placeSearch : null, } }, methods : { initMap() { AMapLoader.load({ "key": "密钥", // 申请好的Web端开发者Key，首次调用 load 时必填 "version": "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15 "plugins": ["AMap.Scale","AMap.ToolBar","AMap.AutoComplete","AMap.PlaceSearch","AMap.ControlBar","AMap.MouseTool"], // 需要使用的的插件列表，如比例尺'AMap.Scale'等 // "plugins": [], // 需要使用的的插件列表，如比例尺'AMap.Scale'等 }).then((AMap)=>{ this.map = new AMap.Map('bai-du-map',{ viewMode : "2D", // 是否为3D地图模式 zoom : 13, // 初始化地图级别 center : [113.65553,34.748764], //中心点坐标郑州 resizeEnable: true }); this.mouseTool = new AMap.MouseTool(this.map); // 监听draw事件可获取画好的覆盖物 this.mouseTool.on('draw',function(e){ this.overlays.push(e.obj); }.bind(this)) }).catch(e => { console.log(e); }); }, draw(type) { switch(type){ case 'marker':{ this.mouseTool.marker({ //同Marker的Option设置 }); break; } case 'polyline':{ this.mouseTool.polyline({ strokeColor:'#80d8ff' //同Polyline的Option设置 }); break; } case 'polygon':{ this.mouseTool.polygon({ fillColor:'#00b0ff', strokeColor:'#80d8ff' //同Polygon的Option设置 }); break; } case 'rectangle':{ this.mouseTool.rectangle({ fillColor:'#00b0ff', strokeColor:'#80d8ff' //同Polygon的Option设置 }); break; } case 'circle':{ this.mouseTool.circle({ fillColor:'#00b0ff', strokeColor:'#80d8ff' //同Circle的Option设置 }); break; } } }, }, mounted() { this.initMap(); }, }; </script>

清除绘制

// 清除 // map.remove(overlays) // overlays = []; // 或者 // mouseTool.close(true)//关闭，并清除覆盖物六、总结

一般的，使用高德地图，不需要参考其他博主写的，基本上就是安装一个加载器@amap/amap-jsapi-loader，然后参考高德地图开放webjs文档，就完全可以自己实现业务需求

高德地图开放webjs文档 ,这个API文档写的很好，包括了针对于Vue和React的基本引用，以及相关地图需求都有API满足