1、安装依赖：npm i @amap/amap-jsapi-loader --save
tips：如果node版本过高，请使用
npm i @amap/amap-jsapi-loader --save --legacy-peer-deps
参考链接：https://blog.csdn.net/lanmy_dl/article/details/126346812
2、使用（初始化地图、地图查询轮廓绘制、按条件进行点的标记，并且绘制涟漪效果）：
1）官网教程：
https://lbs.amap.com/api/jsapi-v2/documentation#marker
2）在相应的组件中进行引用，并且使用：
<template>
// 高德地图组件的Dom
<div
v-loading="loading"
element-loading-text="数据更新中"
element-loading-spinner="el-icon-loading"
element-loading-background="rgba(0, 0, 0, 0.8)"
id="container">
</div>
</template>
<script>
// 引入地图插件
import AMapLoader from '@amap/amap-jsapi-loader'
data() {
return {
loading: false, // 是否处于加载中
map: null, // 当前显示的地图区域对象
AMap: null, // 拿到的所有的地图的对象
searchAreaText: '中国', // 默认查询中国
districtSearch: null, // 查询后的区域的对象
districtPositon: [120.458373, 30.190322], // 当前区域显示的中心点
polygons: [], // 绘制的轮廓的多边形
markers: [], // 标记
mapData: [
{
name: '123', lat: 30.12058, lng: 120.235025, level: 1},
{
name: '456', lat: 30.122361, lng: 120.268371, level: 2 },
{
name: '789', lat: 30.090062, lng: 120.186016, level: 3 },
{
name: '0', lat: 80.090062, lng: 80.186016, level: 4 }
], // 地图上的标记点
colorMap: {
// 根据mapData中的level渲染颜色
1: '#FF4D56',
2: '#FF7E24',
3: '#FDD94C',
4: '#3385FF'
}
}
},
mounted() {
// 设置安全密钥
window._AMapSecurityConfig = {
securityJsCode: '012345678901234567890123456789xx'// 必须配合秘钥使用
}
this.init()
},
methods: {
// 数据初始化
init() {
this.mapData = []
this.markers = [] // 标记
// 因为使用remove进行标记的清除不管用，所以使用这行代码进行画布的清除。如果remove()方法管用，那么可以注释掉这一行代码
this.map && this.map.clearMap()
// DOM初始化完成进行地图初始化
this.initMap()
},
// 初始化地图
initMap() {
AMapLoader.load({
key: "987654321098765432109876543210xx", // 申请好的Web端开发者Key，首次调用 load 时必填
version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
plugins: ['AMap.ToolBar', 'AMap.Scale', 'AMap.DistrictSearch', 'AMap.Marker', 'AMap.LngLat'], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
AMapUI: {
version: '1.1',
plugins: ['overlay/SimpleMarker']
}
}).then((AMap) => {
// 拿到的地图实例
this.AMap = AMap
// 初始化地图
this.map = new AMap.Map("container", {
// 设置地图容器id
viewMode: "2D", // 是否为3D地图模式
zoom: 12, // 初始化地图级别
mapStyle: "amap://styles/darkblue",
center: [120.458373, 30.190322] // 初始化地图中心点位置
})
// 添加toolbar--放大缩小
const toolbar = new AMap.ToolBar()
this.map.addControl(toolbar)
// 添加行政区域信息--所选地区至省/市/区时，地图中显示该区域轮廓
this.addDistrict()
}).catch(e => {
console.log(e)
})
},
// 绘制行政区域
addDistrict() {
const AMap = this.AMap
this.districtSearch = new AMap.DistrictSearch({
subdistrict: 0, // 获取边界不需要返回下级行政区
extensions:'all', // 返回行政区边界坐标组等具体信息 base/all
level: 'district' // country：国家 province：省/直辖市 city：市 district：区/县
})
// 行政区查询
this.districtSearch.search(this.searchAreaText, (status, result) => {
this.map.remove(this.polygons)// 清除上次绘制的轮廓结果
this.polygons = []
const bounds = result.districtList && result.districtList.length ? result.districtList[0].boundaries : []
if (bounds) {
for (let i = 0, l = bounds.length; i < l; i++) {
// 生成行政区划polygon
const polygon = new AMap.Polygon({
strokeWeight: 1,
path: bounds[i],
fillOpacity: 0.6,
fillColor: '#03c1ff',
strokeColor: '#0490fd'
})
this.polygons.push(polygon)
}
}
this.map.add(this.polygons)
this.map.setFitView(this.polygons)// 视口自适应
})
},
// 添加标记点
addMarkers() {
const AMap = this.AMap
if (AMap) {
this.mapData.forEach(item => {
const {
level } = item
if (item.lat && item.lng) {
let marker = new AMap.Marker({
position: new AMap.LngLat(item.lng, item.lat),
content: `<span class="circleMark" style='background:${
this.colorMap(level)}'></span>`,
zIndex: 99,
});
let marker2 = new AMap.Marker({
position: new AMap.LngLat(item.lng, item.lat),
content: `<span class="circleMark" style='background:${
this.colorMap(level)}'></span>`,
zIndex: 99,
offset: ['50%','50%'],
extData: {
hasEffect: level=== 1 // 是否需要涟漪效果
}
});
// 绑定事件
marker.on('click', this.clickMarkerHandler.bind(this, item))
// 将创建的点标记添加到已有的地图实例：
this.map.add([marker2, marker])
if (marker2._opts.extData.hasEffect) {
marker2.dom.classList.add('rippleEffect') // 添加涟漪样式
}
this.markers.push(marker)
}
})
}
},
// 点击marker触发事件
clickMarkerHandler(item, event) {
console.log('点击地图上的点', item)
}
}
</script>
<style lang="scss">
// 这个样式不能放在scoped中！！！否则无效！！！
.circleMark {
display: inline-block;
width: 12px;
height: 12px;
border-radius: 50%;
}
.rippleEffect {
width: 12px;
height: 12px;
border-radius: 50%;
animation: amapTransition 2s linear infinite;
}
@keyframes amapTransition {
0% {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
opacity: 1
}
100% {
-webkit-transform: scale(3);
-moz-transform: scale(3);
-o-transform: scale(3);
transform: scale(3);
opacity: 0.5
}
}
</style>