高德地图自定义窗口添加按钮，并添加点击事件

高德地图自定义窗口添加按钮，并添加点击事件

点击按钮查看PDF，需要使用基础 Vue 构造器，创建一个“子类”。Vue.extend()

具体实现

 let keys = {},
        inspec = "",
        butn = "";
      if (_this.quota == "unqualified_inspection") {
        butn = `<button style="width:130px;height:30px;color:#fff;font-size:14px;border:0;background-color: #228ee3;text-align: center;float:right" v-on:click="getLngLat()">查看不合格意见</button>`;
      } else if (_this.quota == "hidden_danger_report") {
        butn = `<button style="width:130px;height:30px;color:#fff;font-size:14px;border:0;background-color: #228ee3;text-align: center;float:right" v-on:click="getLngLat()">查看隐患上报意见</button>`;
      }
      mapInspectnewest(item.sbzcdm).then(res => {
        if (res.code == "0") {
          keys = res.data;
          keys.forEach(item => {
            inspec += `<div style="background-color:#fff;width: 510px;text-align: left;">
            <ul style="padding:0 10px">
              <li class="actions" style="display: block;"><span>检验内容：${item.jynr} </span></li>
              <li class="actions" style="display: block;"><span>检验结论：${item.jyjl} </span></li>
              <li class="actions" style="display: block;"><span>下次检验日期：${item.inspectDate} </span></li>

            </ul>
          </div>`;
          });
        }
      });
      mapDeviceDetails(item.sbzcdm).then(res => {
        if (res.code == "0") {
          let contents = `
          <div style="background-color:#fff;width: 510px;text-align: left;">
            <ul style="padding:0 10px">
              <li class="actions" style="display: block;"><span>设备注册代码：${res.data.sbzcdm} </span></li>
              <li class="actions" style="display: block;"><span>设备使用地点：${res.data.sbsydd} </span></li>
              <li class="actions" style="display: block;"><span>使用单位名称：${res.data.sydwmc} </span></li>
              <li class="actions" style="display: block;"><span>使用单位代码：${res.data.sydwdm} </span></li>
            </ul>
            ${butn}
          </div>
          `;
          let MyComponent = Vue.extend({
            template: contents,
            data() {
              return {
                msg: "第一张",
                urls: ""
              };
            },
            methods: {
              getLngLat(e) {
                if (_this.quota == "unqualified_inspection") {
                  this.urls =
                    request.defaults.baseURL +
                    urlPublic +
                    "/earlyWarning/index/unqualifiedPdf?tzsbbh=" +
                    _this.items.tzsbbh;
                } else if (_this.quota == "hidden_danger_report") {
                  this.urls =
                    request.defaults.baseURL +
                    urlPublic +
                    "/earlyWarning/index/hiddenDangerPdf?hiddenNo=" +
                    _this.items.hiddenNo;
                }
                axios({
                  method: "get",
                  url: this.urls,
                  headers: {
                    Authorization_bigdata: "Bearer " + getToken()
                  },
                  responseType: "blob"
                })
                  .then(res => {
                    if (res.data.type) {
                      const blob = new Blob([res.data], {
                        type: "application/pdf"
                      });
                      let url = window.URL.createObjectURL(blob);
                      _this.TokenUrl = url;
                      _this.dialogVisible = true;
                    } else {
                      // 返回json
                      _this.$message.warning(res.data.msg);
                    }
                  })
                  .catch(err => {
                    _this.$message.error("下载失败");
                  });
              }
            }
          });
          //然后我们将它手动渲染：
          let component = new MyComponent().$mount();
          var infoWindow = new AMap.InfoWindow({
            //使用自定义窗体
            offset: new AMap.Pixel(0, -22)
          });
          infoWindow.setContent(component.$el); // 自定义窗口添加一个盒子去展示对应Marker(地图上的图标)所要展示的信息
          infoWindow.on("close", function() {
            component.$destroy(); //销毁
          });
          if (item.jd && item.wd) {
            infoWindow.open(_this.maps, [item.jd, item.wd]);
          } else {
            var geocoder = new AMap.Geocoder({
              city: "深圳" //城市设为北京，默认：“全国”
            });
            /**获取经纬度 */
            geocoder.getLocation(item.sbsydd, function(status, result) {
              if (status === "complete" && result.geocodes.length) {
                var lnglat = result.geocodes[0].location;
                _this.maps.setCenter([lnglat.lng, lnglat.lat]);
                infoWindow.open(_this.maps, [lnglat.lng, lnglat.lat]);
              } else {
                _this.msgError("根据地址查询位置失败");
              }
            });
          }
        }
      });