好久没有写文章了，没有什么原因，就是因为自己太懒，最近有做地图相关的功能开发，所以想记录一下了，这次关于高德地图的文章分为基本版、进阶版、高级版三篇文章，里面包括了自定义地图、标记点（批量添加、回显）、点击方法，hover方法、网格（画网格，回显网格）、自定义label框、地图搜索等功能
第一步安装插件
npm i @amap/amap-jsapi-loader --save
第二步
页面
<div class="content">
<div id="container" class="map"></div>
</div>
js
import AMapLoader from "@amap/amap-jsapi-loader";
export default {
data(){
return{
key: '地图key值', // 需要自己放开平台注册帐号
map: {},
formData: {}, //需要的数据
}
},
methods: {
initMap(lng="114.5187723", lat="28.005398"){
AMapLoader.load({
key: this.key,
version: '1.4.15',
plugins: ["AMap.Geocoder", "AMap.Autocomplete", "AMap.PlaceSearch"]
}).then(()=>{
this.map = new AMap.Map("container", {
zoom: 14,
center: [lng, lat],
});
})
}
},
mounted(){
this.initMap()
}
}
自定义地图
mapStyle: 'amap://styles/darkblue'
this.map = new AMap.Map("container", {
zoom: 14,
center: [lng, lat],
mapStyle: 'amap://styles/darkblue'
});
总结
多看文档，一些网站的文章只能让快速了解文档里面的api的使用方法
