使用場景:點選地圖marker彈出自定義資訊視窗,資訊視窗中含有可以點選的元素,點選後觸發自己想要的點選事件(比如彈窗)。
// 第一步,初始化地圖
var center = new qq.maps.LatLng(39.984104, 116.307503);
var map = new qq.maps.Map("container", {
center: center,
zoom: 13
});
//第二步,初始marker
var marker = new qq.maps.Marker({
position: center,
map: map
});
//第三步,初始化infoWindow
var infoWindow = new qq.maps.InfoWindow({
map: map,
position: new qq.maps.LatLng(39.984104, 116.307503),
offset: { x: -8, y: -32 }
});
infoWindow.close();
//第四步,标記Marker點選事件
qq.maps.event.addListener(marker, 'click', function() {
infoWindow.open();
infoWindow.setPosition(marker.getPosition());
infoWindow.setContent("<img src=\"https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=4143431563,2463070161&fm=26&gp=0.jpg\" class=\"img\"><p id=\"btn\">點選我展示更多内容</p>");//設定資訊窗内容
});
// 第五步,資訊視窗的内容變更事件
qq.maps.event.addListener(infoWindow , 'content_changed', function() {
// 這裡需要加一個延時,給DOM元素的加載預留時間
setTimeout(function() {
// 這裡判斷一下id為btn的元素是否已經綁定過了點選事件,避免重複綁定導緻點選一次觸發兩次點選事件
var objEvt = $._data($("#btn")[0], "events");
if (objEvt && objEvt.click) return;
// 為資訊視窗中自定id為btn的元素綁定點選事件
$('#btn').on('click', function() {
alert('更多内容');
})
}, 400)
});
注:使用時除了引人官方地圖api之外還要引入jQuery