天天看點

騰訊地圖資訊化視窗infoWindow中添加點選事件

使用場景:點選地圖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

繼續閱讀