1. 程式人生 > >ionic開發——百度地圖InfoWindow資訊視窗上新增按鈕,無法觸發點選事件問題解決辦法

ionic開發——百度地圖InfoWindow資訊視窗上新增按鈕,無法觸發點選事件問題解決辦法

ionic開發中,在使用百度地圖的時候,有時我們需要在點選地圖上標註的海量點彈出一個infowindow的資訊視窗,自定義資訊視窗的內容後,我們想要可以在資訊視窗上面點選的時候,發現點選沒有效果。

我們用chrome的開發者模式檢視我們繫結的事件是已經繫結上的,可是還繼承了兩個ionic裡面的方法,我們在除錯工具中把這兩個方法remove掉,發現我們自己繫結的事件就可以觸發了。可能因為ionic和百度地圖的資訊視窗有衝突,解決辦法沒有找到,最後我選擇了避開這個問題。

在資訊視窗中,我們可以發現關閉按鈕是可以點選的,所以我查看了關閉按鈕所在的位置,關閉按鈕在<div class="BMap_pop"></div>這個標籤下,所以我選擇了在關閉按鈕的同級新建一個標籤,定位在資訊視窗上,來實現點選的目的。

在開啟資訊視窗的時候我們呼叫這個myClick方法

function myClick(fLng,fLat){
    	// alert($(".BMap_pop").length)
		if($(".BMap_pop").length>0){//有BMap_pop證明資訊視窗已經開啟
			var buttonobj=document.createElement("button"); '<button class="abcd" style="width: 70px;height: 30px;color:#FF6700;position: absolute;left: 200px;top: 64px;z-index: 10000;">去這裡>></button>';
	    	buttonobj.className = "gotohere"
	    	buttonobj.innerHTML = "去這裡";
			buttonobj.style = "width: 70px;height: 30px;color:#FF6700;position: absolute;left: 200px;top: 64px;z-index: 10000;"
	    	buttonobj.onclick=function(){
	    		loadMapcallback(fLng,fLat);
	    	}
	    	var xxx = $(".BMap_pop");
			xxx.remove(".gotohere");
			if(1 > $(".gotohere").length){//防止重複新增button標籤
				xxx.append(buttonobj);
			}else{}
			
		}else{
			myClick(fLng,fLat);
		}
    }
具體的定位位置和樣式問題,大家根據自己的需求進行除錯,如果大家有直接解決在infowindow上面新增可點選按鈕的方法,請告訴我!謝謝啦!!!