1.地图触发事件
initMap() {
let that = this;
let values;
// 监听地图平移开始
this.map.on('pan', function () {
this.lat = that.map.getCenter().lat;
this.lng = that.map.getCenter().lng;
values = {lat: this.lat, lng: this.lng};
});
// 监听地图平移结束
this.map.on('panend', function () {
that.devList(values);//所要调用的接口请求
});
},
2.地图初始化之后触发initMap事件
init(val) {
this.center = new TMap.LatLng(this.lat, this.lng); //(39.984104, 116.307503);//设置中心点坐标
this.map = {};
// 初始化地图
this.map = new TMap.Map('container', {
center: this.center
});
var that = this;
this.map.on('click', function () {
that.infoWindow.close();
});
const devReqParam = {lat: this.lat, lng: this.lng}
// 加载设备列表接口
this.devList(devReqParam);
// 初始marker
this.marker1 = new TMap.MultiMarker({
id: 'marker-layer3',
map: this.map,
styles: {
marker1: new TMap.MarkerStyle({
width: 40,
height: 45,
anchor: {x: 20, y: 35},
src: `${icon}`
}),
marker2: new TMap.MarkerStyle({
width: 40,
height: 45,
anchor: {x: 20, y: 35},
src: `${icon2}`
}),
marker3: new TMap.MarkerStyle({
width: 40,
height: 45,
anchor: {x: 20, y: 35},
src: `${icon3}`
}),
marker4: new TMap.MarkerStyle({
width: 40,
height: 45,
anchor: {x: 20, y: 35}
// src: `${icon3}`
})
},
geometries: this.list
});
/**
* 标注点击事件
*/
this.marker1.on('click', function (evt) {
that.showTip(evt);
});
var infoTip = `
<div class="info">
</div>
`;
let tk = new TMap.LatLng(39.984104, 116.307503);
// 初始化infoWindow
this.infoWindow = new TMap.InfoWindow({
map: this.map,
position: tk,
content: infoTip,
offset: {x: 0, y: -35} //设置信息窗相对position偏移像素
});
// 关闭弹窗
this.infoWindow.close();
this.initMap();
}
3.点击时触发-html部分
<div id="container" style="width:100%;height:100%;" @click="initMap"/>