高德地图 动态渲染marker

版权声明：转发请标明出处 https://blog.csdn.net/hailangtuteng/article/details/81364384

data() {
return {
flag: true,
flag2: false,
dataTree: []
};
},
unitBuilding() {
this.$axios
.post(“sinhic-service-website/unit/building/list”, {
page: 1,
pagesize: 9999
})
.then(res => {

      if (res.status === 200) {
        this.dataTree = res.data.list;
      }

      let markerList = [];
      let positionX = 0;
      let positionY = 0;
      for (let i = 0; i < this.dataTree.length; i++) {
        positionX =
          positionX + parseFloat(this.dataTree[i].coordinate.split(",")[0]);
        positionY =
          positionY + parseFloat(this.dataTree[i].coordinate.split(",")[1]);
      }
      var map = new AMap.Map("container", {
        mapStyle: "amap://styles/b12367f2f40ea09b8ae2309649bdb07d", //设置地图的显示样式
        zoom: 10, //设置地图的缩放级别
        center: [
          parseFloat(positionX / this.dataTree.length),
          parseFloat(positionY / this.dataTree.length)
        ] //设置地图的中心点
      });
      map.clearMap();
      for (let i = 0; i < this.dataTree.length; i++) {
        if (this.dataTree[i].statusFlag == 1) {
          var icon=new AMap.Icon({
              image:"../../static/keyPoint_green.png",
              size: new AMap.Size(128, 128), //图标大小
              imageSize: new AMap.Size(37, 37)
            });
        }else if (this.dataTree[i].statusFlag == 2) {
            var icon=new AMap.Icon({
              image:"../../static/keyPoint_yellow.png",
              size: new AMap.Size(128, 128), //图标大小
              imageSize: new AMap.Size(37, 37)
            });
        }else if (this.dataTree[i].statusFlag == 3) {
            var icon= new AMap.Icon({
              image: "../../static/keyPoint_red.png",
              size: new AMap.Size(128, 128), //图标大小
              imageSize: new AMap.Size(37, 40)
            });
        } else if (this.dataTree[i].statusFlag == 4) {
            var icon= new AMap.Icon({
              image:
                "../../static/keyPoint_orange.png",
              size: new AMap.Size(128, 128), //图标大小
              imageSize: new AMap.Size(37, 37)
            });
                    }
                    var infoWindow = new AMap.InfoWindow({offset: new AMap.Pixel(0, -30)});
                    var layer = new AMap.TileLayer.RoadNet();

                    layer.Nu=false;
                    layer.G.detectRetina=false
                    layer.Qi.detectRetina=false
                    let marker = new AMap.Marker({
                        icon: icon,
                        zIndex: 101,
                        map: map,
                        position: [
                            this.dataTree[i].coordinate.split(",")[0],
                            this.dataTree[i].coordinate.split(",")[1]
                        ],
                        // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
                        //title: this.dataTree[i].buildName
                    });
                    marker.setMap(map);
                //  marker.setTitle(this.dataTree[i].buildName);
        if(this.dataTree[i].statusFlag == 3){
                            marker.setAnimation("AMAP_ANIMATION_BOUNCE");
                            marker.setAnimation("AMAP_ANIMATION_BOUNCE");
                    }
                    // marker.content = "我是第2个Marker";
                    marker.on("click", markerClick);
                    function markerClick(e) {
                        infoWindow.setContent(e.target.content);
                        infoWindow.open(map, e.target.getPosition());
                    }
                    marker.setLabel({
                        //label默认蓝框白底左上角显示，样式className为：amap-marker-label
                        offset: new AMap.Pixel(-15, 36), //修改label相对于maker的位置
                        content: this.dataTree[i].buildName
                    });
        AMap.plugin("AMap.ToolBar", function() {
          //异步加载插件
          var toolbar = new AMap.ToolBar();
          map.addControl(toolbar);
        });
      }
    });
},