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

Posted w-rong

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了高德地图实现标点点聚合和信息窗体相关的知识,希望对你有一定的参考价值。

   //展示
    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 = [
          "<div style=‘display:flex;height:80px;font-size:14px‘>",
          "<div style=‘width:80px;height:60px‘>",
          "<img style=‘width:100%;height:100%‘ src=‘https://smsycs.hxxpl.com.cn/2019/201912191545286185117.png‘></div>",
          "<p style=‘padding-left:5px;margin-top:15px‘>地址:" +
            e.target.address +
            "</p>",
          "</div>"
        ];
      } else {
        var content = [
          "<div style=‘display:flex;height:80px;font-size:14px‘>",
          "<div style=‘width:80px;height:60px‘>",
          "<img style=‘width:100%;height:100%‘ src=‘" +
            e.target.imgUrl +
            "‘></div>",
          "<p style=‘padding-left:5px;margin-top:15px‘>地址:" +
            e.target.address +
            "</p>",
          "</div>"
        ];
      }
      var title = e.target.title;
      var title = "<div style=‘font-size:16px‘>" + e.target.title + "</div>";
      var infoWindow = new AMap.InfoWindow({
        content: title + content.join("<br>")
      });
      infoWindow.open(this.map, [
        e.target.getPosition().lng,
        e.target.getPosition().lat
      ]);
    },
 
技术图片

 

 

以上是关于高德地图实现标点点聚合和信息窗体的主要内容,如果未能解决你的问题,请参考以下文章

Vue高德地图api使用指南(动态渲染信息窗体)

高德地图实现一个比例圆环形聚合点缩放

怎样在高德地图上标注我的商店

高德地图怎样自已规划驾车线路?

高德地图聚合

怎么设置高德地图位置