高德地图 点 聚合点 线 弹框 自定义主题的实现方法

最近要写一张大屏 起初定的是用百度地图写中间地图，写的差不多了突然要求要用高德地图写，今天就记一下高德实现点 线 弹框的方法，（百度和高德都差不多，调方法就完了），首先要用秘钥，key 初始画一个地图就不过多赘述  写功能时引入自己需要的插件

 plugins: [
          "AMap.DistrictSearch",
          "AMap.Icon",  //图标
          "AMap.Marker", //点
          "AMap.MarkerClusterer", // 聚合点
          "AMap.LngLat",
          "AMap.Pixel",
          "Map.MarkerClusterer",
          "AMap.InfoWindow", //弹框
          "AMap.PolylineEditor",
          ....
        ], // 这是我需要使用的的插件列表，如比例尺'AMap.Scale'等

画点 聚合点

//请求后端接口拿到点数据
mapPoint() {
      for (var i = 0; i < this.dotmessage.length; i++) {
        var marker = new AMap.Marker({
          // map: this.map,
          position: this.dotmessage[i].lnglat,
          icon: this.icon,
          offset: new AMap.Pixel(-0, -37),
        });
        marker.setExtData = this.dotmessage[i];
        marker.lnglat = this.dotmessage[i].lnglat;
        this.map.setFitView();

        // marker逐一push到markers
        this.markers.push(marker);
        // this.map.add(this.markers);//添加到地图上但是后边点太多用到聚合点所以这一步就可以先不用
        // console.log(this.markers);
      }
    },

//聚合点
    addCluster() {
      let that = this;
      this.cluster = new AMap.MarkerClusterer(
        this.map, //指定地图对象
        this.markers, //指定需要聚合的点标记对象
        {
          styles: "",
          renderMarker: function (object) {
            // console.log("object", object);
            that.dotmessage.forEach((item, index) => {
              if (
                item.lnglat[0] == object.data[0]._position[0] &&
                item.lnglat[1] == object.data[0]._position[1]
              ) {
                object.marker.setExtData(item);//这一步是给点数据上设置其他要展示的属性
              }
            });

            object.marker.setIcon(that.icon);
            object.marker.on("click", (ev) => {
              //当前标记居中
              that.makercount += 1;
              that.map.setZoomAndCenter(16, ev.target.getPosition());
              that.extData = ev.target.getExtData();
              //获取标记携带的数据
              // console.log("222222222", that.extData);
              that.createddialog(that.extData);
              that.infoWindow.open(that.map, ev.target.getPosition());
              // object.marker.setIcon(that.icon2);
            });
          },
        }
      );
    },

点击切换自定义图标

//点击切换点图标，这个功能我在写的时候发现如果设置聚合点的情况下切换会失效，就切掉了，这里也说一下吧（大家有好的办法也可说一下）
//首先定义两个icon
       (this.icon = new AMap.Icon({
            size: new AMap.Size(55, 70), // 图标尺寸
            image: require("../../../../../assets/images/sjyyimage/pic_zhandian_un.png"), // Icon的图像
            imageSize: new AMap.Size(30, 40), // 根据所设置的大小拉伸或压缩图片
          })),
      (this.icon2 = new AMap.Icon({
              size: new AMap.Size(55, 70), // 图标尺寸
              image: require("../../../../../assets/images/sjyyimage/pic_zhandian_se.png"), // Icon的图像 
              imageSize: new AMap.Size(30, 40), // 根据所设置的大小拉伸或压缩图片
            })),
给点添加点击事件  点击时就切换icon 保存一下上一个点（再点击第二个点的时候切换icon同时还原第一个点的初始图标） markers.setIcon(this.icon2);

划线

 // 划线   点击切换线颜色   打开弹框
    mapolyLine() {
      let that = this;
      this.path.forEach((item, index) => {
        // console.log("222222222222222222222222", item);
        let polyline = new AMap.Polyline({
          path: item.path1,
          isOutline: true,
          outlineColor: "#021a39",
          borderWeight: 0,
          strokeColor: "#02AD15",
          strokeOpacity: 1,
          strokeWeight: 4,
          // 折线样式还支持 'dashed'
          strokeStyle: "solid",
          // strokeStyle是dashed时有效
          strokeDasharray: [10, 5],
          lineJoin: "round",
          lineCap: "round",
          zIndex: 50,
        });
        polyline.on("click", (e) => {
          // console.log("4444");
          that.Linecount += 1;
          that.createdLineDialog(e);
          let index = Math.round(e.target.$x[0].length / 2);
          // console.log("4444", e.target.$x[0][index]);
          that.infoWindow1.open(that.map, e.target.$x[0][index]);
          this.map.setZoomAndCenter(
            this.map.getZoom() + 3,
            e.target.$x[0][index]
          );
          polyline.setOptions({ strokeColor: "#ff8033", strokeWeight: 9 });
          if (this.afterLine) {
            that.afterLine.setOptions({
              strokeColor: "#02AD15",
              strokeWeight: 4,
            });
          }
          that.afterLine = polyline;
        });
        that.polyLine.push(polyline);
        // console.log("this.polyLine", this.polyLine);
        that.map.add(this.polyLine);
      });
    },

自定义弹框

 createInfoWindowline(e) {
      // console.log(e);
      var content1 = [];
      content1.push(
        `
        <div style="width: 800px;font-size: 30px;color:#fff;padding-left: 75px; margin-bottom: 20px;position :absolute;top :50px">
          <div>${"xxxxx"}</div>
        </div>
       `
      );
      content1.push(`
       <div style="width:800px;font-size: 27px;color:#fff;padding-left: 50px;display:flex;position :absolute;top:115px">
          <div style="width:50%">11111</div>
          <div style="width:50%">11111</div> 
        </div> 
      `);
      content1.push(`
       <div style="width:800px;font-size: 27px;color:#fff;padding-left: 50px;display:flex;position :absolute;top:165px">
          <div style="width:33.3%">11111</div>
          <div style="width:33.3%">11111</div>
          <div style="width:33.3%">111111</div>
        </div> 
      `);

      var info1 = document.createElement("div");
      //可以通过下面的方式修改自定义窗体的宽高
      info1.style.width = "800px";
      // info.style.position = "relative";
      info1.style.height = "250px";
      info1.style.backgroundImage = `url(
        ${require("../../../../../assets/images/sjyyimage/pic_gaosuwangluo_bg.png")}
      )`; //设置背景图片
      info1.style.backgroundRepeat = "no-repeat"; //设置图片不重复
      info1.style.backgroundSize = "100% 100%"; //设置图片为平铺(刚好铺满div)

      // 定义中部内容
      var middle1 = document.createElement("div");
      // console.log("1111111", middle1);
      // console.log(middle);
      middle1.style.width = "800px";
      middle1.className = "info-middle1";
      middle1.style.color = "rgba(2, 26, 57,0)";
      // "rgba(2, 26, 57,0)"
      middle1.innerHTML = content1;
      info1.appendChild(middle1);
      return info1;
    },


// 
 createdLineDialog(e) {
      // console.log(e);
      this.infoWindow1 = new AMap.InfoWindow({
        isCustom: true, //使用自定义窗体
        content: this.createInfoWindowline(e),
        offset: new AMap.Pixel(16, -45),
      });
    },

//在合适的地方使用open方法打开    infoWindow1

补充一下  自定义主题 这个忘记发了

自定义地图 | GeoHUB (amap.com) 

在里面设置好自己的地图样式  在初始化地图时加入

   this.map.setMapStyle(
      "amap://styles/c80a91***************a25f2"//你创建的地图样式路径
       );