地图信息窗口点击事件触发methods中的方法

勉灬之

已于 2022-04-19 16:10:44 修改

阅读量512

点赞数

文章标签：前端 vue.js javascript

于 2022-03-04 10:52:54 首次发布

本文链接：https://blog.csdn.net/qq_39410252/article/details/123271227

版权

核心代码
将methods里边的方法赋值给全局变量

// 将methods里边的方法赋值给全局变量
mounted() {
	window.mapCallback = this.mapCallback	
},
methods:{
	mapCallback(IMEI, type) {
	 	//业务处理     
	}
}

实现过程
1、点击弹出窗体

//初始化infoWindow
var infoWindow = new TMap.InfoWindow({
  map: this.mapEntity,
  position: new TMap.LatLng(39.984104, 116.307503),
  offset: { x: 0, y: -32 }, //设置信息窗相对position偏移像素，为了使其显示在Marker的上方
})
infoWindow.close() //初始关闭信息窗关闭
//监听标注点击事件
markerLayer.on('click', (evt) => {
  console.log(evt)
  //设置infoWindow
  infoWindow.open() //打开信息窗
  infoWindow.setPosition(evt.geometry.position) //设置信息窗位置
  // infoWindow.setContent(this.generateDiv(evt.geometry.imei, evt.geometry.studentName,evt.geometry.status,'',evt.geometry.time,evt.geometry.location)) //设置信息窗内容
  infoWindow.setContent(this.generateDiv(evt.geometry)) //设置信息窗内容
})
// 将methods里边的方法赋值给全局变量
window.mapCallback = this.mapCallback

2、生成窗体

// 返回信息窗体dom
generateDiv({ imei, deviceName, status, locationType, time, location, address }) {
      const load = `<div style="width: 100%;min-width:250px;height: 100%;padding: 10px;color: #555555;font-size: 14px;">
			  <div style="display: flex;">IMEI：${imei || '数据丢失'}</div>
			  <div style="display: flex;margin-top: 6px;">${deviceName || '设备名称'}：
				  <div style="background: #ef7272;color: #FFFFFF;line-height: 22px;height: 22px;text-align: center;width: 40px;border-radius: 2px;">
					${status == 1 ? '在线' : '离线'}
			  	</div>
			  </div>
		  	<div style="display: flex;justify-content: space-between;margin-top: 6px;"><span>${
          locationType || 'GPS'
        }定位</span><span>${time}</span></div>
			  <div style="display: flex;margin-top: 6px;height: 35px;font-weight: 700;">${address || '位置信息'}</div>
			  <div style="margin-top: 6px;color: #85a6fe;display: flex;justify-content: space-around;">
				  <span οnclick="mapCallback(${imei}, 1)">足迹回放</span>
				  <span οnclick="mapCallback(${imei}, 2)">告警信息</span>
				  <span οnclick="mapCallback(${imei}, 3)">指令查看</span>
			  </div>
		  </div>`
      return load
    },

3、定义触发的事件

// 点击事件
mapCallback(IMEI, type) {
 const pathList = ['/location/footprint', '/bizCardInvokeLog/getAlarmLogPage', '/bizCardEquipment/page']
 this.$router.push({
   path: pathList[type - 1],
   query: {
     imei: IMEI,
   }
 })
},