vue+高德地图根据不同标准换图标

最新推荐文章于 2024-01-17 17:28:59 发布

一个前端女子

最新推荐文章于 2024-01-17 17:28:59 发布

阅读量1.2k

点赞数 1

分类专栏：高德地图文章标签： vue.js 前端

本文链接：https://blog.csdn.net/qq_44173499/article/details/123151665

版权

本文介绍如何在Vue项目中利用高德地图API，根据不同的条件或标准动态更换地图上的图标，展示了具体的代码实现和实际效果。

摘要由CSDN通过智能技术生成

vue+高德地图根据不同标准换图标

关键;

①

代码：

Markup

realPointSimplifierIns(){
            this.map =amapManager.getMap();
            let data="";
            //this.monitorInfo=this.tableData;
            let i=0;
            let list=this.tableData;
            
            this.tableData.forEach((item) => {
                // console.log(""[[[[]]]],item);
                if(item.longitude){
                    this.monitorInfo.push(item)
                    data +=[item.longitude+","+item.latitude] + "|"
                }
            });
            // console.log("4454848",data);
            AMapUI.load(['ui/geo/DistrictCluster','ui/misc/PointSimplifier', 'lib/$'], (DistrictCluster, PointSimplifier, $)=>{
                    const blue =  require('@/assets/cmp.png') ;
                    const yellow =  require('@/assets/yel.png') ;
                    const ora =  require('@/assets/ora.png') ;
                    const red =  require('@/assets/red.png') ;
                    const gre =  require('@/assets/gre.png') ;
                    let groupStyleMap ;
                    let pointSimplifierIns;
                    if (!PointSimplifier.supportCanvas) {
                        alert('当前环境不支持 Canvas！');
                        return;
                    }
                    let distCluster = new DistrictCluster({
                        zIndex: 100,
                        topAdcodes: [330000],
                        map: this.map, //所属的地图实例

                        getPosition: function(item) {

                            if (!item) {
                                return null;
                            }

                            var parts = item.split(',');

                            //返回经纬度
                            return [parseFloat(parts[0]), parseFloat(parts[1])];
                        }
                    });

                 window.distCluster = distCluster;

                    pointSimplifierIns = new PointSimplifier({
                        map: this.map, //所属的地图实例
                        getPosition: function(item) {

                            if (!item) {