高德地图api地址:https://lbs.amap.com/api/javascript-api/reference/map
1.异步创建script标签
注意需要MarkerClusterer插件
(https://webapi.amap.com/maps?v=1.4.15&key=你的key&callback=initAMap&plugin=AMap.MarkerClusterer)
export default function MapLoader() {
return new Promise((resolve, reject) => {
if (window.AMap) {
resolve(window.AMap);
} else {
var script = document.createElement('script');
script.type = "text/javascript";
script.async = true;
script.src = "https://webapi.amap.com/maps?v=1.4.15&key=你的key&callback=initAMap&plugin=AMap.MarkerClusterer";
script.onerror = reject;
document.head.appendChild(script);
}
window.initAMap = () => {
resolve(window.AMap);
};
});
}
2.参照高德地图api按步骤写功能
<template>
<view class="map">
<view class="map" id="map"></view>
</view>
</template>
<script>
import AMap from "@/common/util/map.js";
export default {
data() {
return {
zoom: 11,
initLat: 29.10037,
initLng: 119.705008,
pois:[],
url:'',//请求接口
}
},
methods: {
getData(){
let that = this;
this.$http.get(that.url).then(res => {
if(res.data.success){
that.pois = res.data.result;
that.initAMap();
}
});
},
async initAMap() {
try {
this.resAmap = await AMap();
this.$nextTick(function() {
let that = this;
let map = new this.resAmap.Map('map', {
resizeEnable: true,
center: [this.initLng, this.initLat],
zoom: this.zoom,
});
this.map = map;
let cluster,markers=[];
for (let item of this.pois) {
let coordinate =[item.longitude,item.latitude];
let content = `<div style="background-color:hsla(15, 100%, 50%, 0.7);height:100%;width:200px;box-shadow:hsl(15, 100%, 50%) 0px 0px 1px;padding:5px 3px;line-height:24px;color:white;text-align: center">${item.name}</div>`;
content+=`<div style="width: 0px;height: 0px;border-left: 5px solid transparent; border-right: 5px solid transparent;border-top: 8px solid hsla(15, 100%, 50%, 0.7);position: absolute;bottom: -8px;left: 10px"></div>`;
markers.push (new that.resAmap.Marker({
content: content,
position: coordinate,
}));
}
let count = markers.length;
let _renderClusterMarker = function (context) {
let factor = Math.pow(context.count / count, 1 / 18);
let div = document.createElement('div');
let Hue = 180 - factor * 180;
let bgColor = 'hsla(' + Hue + ',100%,50%,0.7)';
let fontColor = 'white';
let shadowColor = 'hsla(' + Hue + ',100%,50%,1)';
div.style.backgroundColor = bgColor;
let size = Math.round(30 + Math.pow(context.count / count, 1 / 5) * 20);
div.style.width = div.style.height = size + 'px';
div.style.borderRadius = size / 2 + 'px';
div.style.boxShadow = '0 0 1px ' + shadowColor;
div.innerHTML = context.count;
div.style.lineHeight = size + 'px';
div.style.color = fontColor;
div.style.fontSize = '14px';
div.style.textAlign = 'center';
context.marker.setOffset(new that.resAmap.Pixel(-size / 2, -size / 2));
context.marker.setContent(div)
};
cluster = new that.resAmap.MarkerClusterer(this.map, markers, {
gridSize: 80,
renderClusterMarker: _renderClusterMarker
});
});
} catch (e) {
console.log(e)
}
},
},
onLoad() {
this.getData();
},
}
</script>
<style scoped>
.map {
width: 100%;
height: 100vh;
}
</style>