使用高德地图api点聚合案例 (自定义样式)

高德地图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>