關於百度地圖 BMap.InfoWindow 只顯示最後一條信息解決方法

今天遇到這個問題了。後面再網上搜搜，發現都是你抄我，我轉載你的，後來無意看到一篇文章，說是用閉包後來解決了。現在把問題解決方法發出來

function baiduMapFunction(divId, hotelArray) {
	var map = new BMap.Map(divId);// 創建百度地圖對象


	map.centerAndZoom(new BMap.Point(116.404, 39.915), 12);


	map.enableScrollWheelZoom(); // 啓用滾輪放大縮小，默認禁用
	map.enableContinuousZoom(); // 啓用地圖慣性拖拽，默認禁用
	map.addControl(new BMap.NavigationControl()); // 添加默認縮放平移控件,左上角
	map.addControl(new BMap.ScaleControl()); // 添加默認比例尺控件
	map.addControl(new BMap.MapTypeControl({
		anchor : BMAP_ANCHOR_TOP_RIGHT
	})); // 左上角，默認地圖控件
	for ( var o in hotelArray) {
		var point = new BMap.Point(hotelArray[o].lng, hotelArray[o].lat);// 座標點


		var hotelNameLabel = new BMap.Label(hotelArray[o].hotelName, {
			offset : new BMap.Size(20, -10)
		});// 標註顯示名稱


		var sContent = "<div>"
				+ "<h4 style='margin:0 0 5px 0;padding:0.2em 0'>"
				+ hotelArray[o].hotelName
				+ "</h4>"
				+ "<img style='float:right;margin:4px' id='imgDemo' src='../images/"
				+ hotelArray[o].srcImage
				+ "' width='139' height='104' title=''/>"
				+ "<p style='margin:0;line-height:1.5;font-size:13px;text-indent:2em'>"
				+ hotelArray[o].hotelAddress + "</p>" + "</div>";


		// 設置label 文本框的樣式
		hotelNameLabel.setStyle({
			"borderColor" : "red",
			"color" : "red",
			"cursor" : "pointer"


		});
		console.log(hotelArray[o].srcImage + sContent);
		createMark = function(lng, lat, info_html) {
			var _marker = new BMap.Marker(new BMap.Point(lng, lat));
			_marker.addEventListener("click", function(e) {
				this.openInfoWindow(new BMap.InfoWindow(info_html));
			});
			_marker.addEventListener("mouseover", function(e) {
				this.setTitle("位於: " + lng + "," + lat);
			});
			return _marker;
		};


		var marker = createMark(hotelArray[o].lng, hotelArray[o].lat, sContent);


		map.addOverlay(marker);
		marker.setLabel(hotelNameLabel); // 添加百度label


	}
	city = new BMap.LocalSearch(map, {
		renderOptions : {
			map : map,
			autoViewport : true
		}
	}); // 地圖顯示到查詢結果處
}


function searchCity() {
	var s = $("#searchValue").val();
	console.log(s);
	city.search(s); // 查找城市
}

上面這個函數，就接受一個json數組對象，和一個在你頁面的divId。因爲要顯示地圖

先把地圖初始化之後，在循環裏面一次從json中讀取數據，然後new 出標註對象。再爲每個標註對象添加監聽方法

在添加監聽方法的時候，會遇到，不管點擊哪一個標註，都是輸出最後一條的信息。

這主要是作用域的問題，之後寫了個閉包的方法。

如下

var 	createMark = function(lng, lat, info_html) {
			var _marker = new BMap.Marker(new BMap.Point(lng, lat));
			_marker.addEventListener("click", function(e) {
				this.openInfoWindow(new BMap.InfoWindow(info_html));
			});
			_marker.addEventListener("mouseover", function(e) {
				this.setTitle("位於: " + lng + "," + lat);
			});
			return _marker;
		};

將經緯度，和顯示信息單獨放在函數裏，new標註之後，立刻加監聽。

這樣之後就解決了這個問題了