高德地图实现标点、点聚合和信息窗体

2021-03-06 19:27

阅读:553

标签:无数据   pix   cti   创建   ddr   实例   icon   尺寸   数组   

   //展示
    showscenicPoints() {
      var icon = new AMap.Icon({
        size: new AMap.Size(35, 45), // 图标尺寸
        image: "/images/scenic.png" // Icon的图像
      });
      // console.log(this.scenicList);
      this.scenicList.forEach((element, i) => {
        // console.log(element);
        if (element.latitude != "") {
          var marker = new AMap.Marker({
            position: new AMap.LngLat(element.longitude, element.latitude),
            offset: new AMap.Pixel(-10, -10),
            icon: icon // 添加 Icon 实例
            // title:element.scenicName
          });
          marker.title = element.scenicName;
          marker.imgUrl = element.pictureAddress;
          marker.address = element.scenicAddress;
          if (this.scenicTourist[i].num == undefined) {
            marker.tourist = "暂无数据";
          } else {
            marker.tourist = this.scenicTourist[i].num;
          }

          marker.on("click", this.markerScenicClick);
          this.allscenicPoints.push(marker);
        }
      });
      this.map.add(this.allscenicPoints);
      var that = this;
      this.map.plugin(["AMap.MarkerClusterer"], function() {
        // console.log(that.allscenicPoints);
        new AMap.MarkerClusterer(
          that.map, // 地图实例
          that.allscenicPoints // 海量点组成的数组
        );
      });
    },
 
技术图片

 

 

 
// 创建信息窗口
    markerClick(e) {
      if (e.target.imgUrl == null) {
        var content = [
          "
",
          "
",
          "
",
          "

地址:" +

            e.target.address +
            "",
          "
"
        ];
      } else {
        var content = [
          "
",
          "
",
          "
            e.target.imgUrl +
            "‘>
",
          "

地址:" +

            e.target.address +
            "",
          "
"
        ];
      }
      var title = e.target.title;
      var title = "
" + e.target.title + "
";
      var infoWindow = new AMap.InfoWindow({
        content: title + content.join("
")
      });
      infoWindow.open(this.map, [
        e.target.getPosition().lng,
        e.target.getPosition().lat
      ]);
    },
 
技术图片

 

 

高德地图实现标点、点聚合和信息窗体

标签:无数据   pix   cti   创建   ddr   实例   icon   尺寸   数组   

原文地址:https://www.cnblogs.com/w-rong/p/12850798.html


评论


亲,登录后才可以留言!