vue - 结合腾讯地图时绑定监听要使用箭头函数不然无法绑定
//错误的绑定
qq.maps.event.addDomListener(map, 'click', function (event) {
addMarker(event.latLng);
});
//正确绑定
methods: {
initTXMap() {
//步骤:定义map变量 调用 qq.maps.Map() 构造函数 获取地图显示容器
//设置地图中心点
var myLatlng = new qq.maps.LatLng(this.longitude,this.latitude);
//定义工厂模式函数
var myOptions = {
zoom: 13, //设置地图缩放级别
center: myLatlng, //设置中心点样式
mapTypeId: qq.maps.MapTypeId.ROADMAP //设置地图样式详情参见MapType
}
//获取dom元素添加地图信息
this.map = new qq.maps.Map(document.getElementById("container"), myOptions);
//给地图添加点击事件
//并获取鼠标点击的经纬度
qq.maps.event.addListener(this.map, 'click', (event) => {
this.longitude = event.latLng.getLat();
this.latitude = event.latLng.getLng();
alert("经度:"+this.longitude+","+"纬度:"+this.latitude);
this.addMarker(event.latLng);
});
},
addMarker(location){
var marker = new qq.maps.Marker({
position: location,
map: this.map
});
this.markersArray.push(marker);
}
}