amap.gif
省
市
区
停车场
自定义弹窗
在高德地图中有个汇聚点的api但是那个不确定性太高，各个点的位置不确定。所以在使用时直接被弃用，转而使用marker去自定义各个层级的各个点位。
理解
工程中我们将省、市、区、停车场。大体分为四种UI样式。通过监听地图的层级变化，去改变不同zoom下显示的对应UI效果。
注意点
一、每种样式在自己zoom层级内只创建一次，因为如果不这样处理那么每次zoom改变都会去创建新的marker这样会导致页面卡顿崩溃。核心思维代码如下👇
// 监听地图层级变化
AMap.event.addListener(that.map, "zoomend", function () {
var zoom = that.map.getZoom();
zoomgetMarker(zoom);
});
// 根据层级不同去创建对应的marker。
function zoomgetMarker(zoom) {
if (zoom <= 7) {
if (that.currentLevel !== 1) {
that.currentLevel = 1;
....// 加载省的marker
}
} else if (zoom < 10) {
if (that.currentLevel !== 2) {
that.currentLevel = 2;
....// 加载市的marker
}
} else if (zoom < 12) {
if (that.currentLevel !== 3) {
that.currentLevel = 3;
district.setLevel("district");
....// 加载区的marker
}
} else {
if (that.currentLevel !== 4) {
that.currentLevel = 4;
....// 加载停车场的marker
}
}
}
二、在加载省、市、区、停车场四种不同的marker时需要将之前的marker销毁掉然后重新创建
const that = this；
that.map.remove(that.markers);// 先销毁掉之前的所有marker
list.map((data) => {
// 海量生成marker点
var marker = new AMap.Marker({
position: new AMap.LngLat(data.lng, data.lat),
content: `自定义内容`,
map: map,
});
that.markers.push(marker);// 每创建一个marker就添加到markers列表中。
}
三、如何创建自定义Marker，以及在Marker中使用静态图片和Marker的点击事件
// 1.html 以字符串的方式传给content就可以自定义Marker
// 2.使用require('xxxx本地图片地址')获取本地图片
var marker = new AMap.Marker({
position: [lng,lat],
content: `
<div class="markercustomize2" style="display: flex;align-items: center;color: #ffffff;border-radius: 5px;padding:0 3px">
<img style="width:25px;height:25px;object-fit: contain;" src="${require("../assets/parking_map_logo.png")}"></img>
<span style="font-size: 16px;white-space: nowrap;display: inline-block;line-height: 16px;height: 16px;">
${"芯城科技园停车场"}
</span>
</div>`,
map: this.map,
});
// 3.监听marker的点击事件
AMap.event.addListener(marker, "click", function (e) {
// 处理点击事件
});
四、如何动态改变Marker的class样式。
最好是不要用全局的样式去修改，因为那样会影响到全部。最好使用/deep/去局部修改marker的样式，这样可以最终达到好的结果。
/deep/.amap-maps {
.amap-drags {
.amap-layers {
.amap-markers {
.amap-marker {
z-index: 1 !important;
.amap-marker-content {
.markercustomize2 {
background: #1567ff;
}
}
}
.amap-marker:hover {
z-index: 9999 !important;
.amap-marker-content {
.markercustomize2 {
background-color: #45afff;
}
}
}
}
}
}
}
在下载依赖包时请使用yarn
