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

点击按钮查看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("根据地址查询位置失败");}});}}});