码迷,mamicode.com
首页 > Windows程序 > 详细

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

时间:2020-05-08 16:34:06      阅读:471      评论:0      收藏:0      [点我收藏+]

标签:无数据   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 = [
          "<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
      ]);
    },
 
技术图片

 

 

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

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

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!