1. 程式人生 > >關於百度地圖 BMap.InfoWindow 只顯示最後一條資訊解決方法

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

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

[javascript] view plaincopyprint?
  1. function baiduMapFunction(divId, hotelArray) {  
  2.     var map = new BMap.Map(divId);// 建立百度地圖物件
  3.     map.centerAndZoom(new BMap.Point(116.404, 39.915), 12);  
  4.     map.enableScrollWheelZoom(); // 啟用滾輪放大縮小,預設禁用
  5.     map.enableContinuousZoom(); // 啟用地圖慣性拖拽,預設禁用
  6.     map.addControl(new BMap.NavigationControl()); // 新增預設縮放平移控制元件,左上角
  7.     map.addControl(new BMap.ScaleControl()); // 新增預設比例尺控制元件
  8.     map.addControl(new BMap.MapTypeControl({  
  9.         anchor : BMAP_ANCHOR_TOP_RIGHT  
  10.     })); // 左上角,預設地圖控制元件
  11.     for ( var o in hotelArray) {  
  12.         var point = new BMap.Point(hotelArray[o].lng, hotelArray[o].lat);// 座標點
  13.         var hotelNameLabel = new BMap.Label(hotelArray[o].hotelName, {  
  14.             offset : new BMap.Size(20, -10)  
  15.         });// 標註顯示名稱
  16.         var sContent = "<div>"
  17.                 + "<h4 style='margin:0 0 5px 0;padding:0.2em 0'>"
  18.                 + hotelArray[o].hotelName  
  19.                 + "</h4>"
  20.                 + "<img style='float:right;margin:4px' id='imgDemo' src='../images/"
  21.                 + hotelArray[o].srcImage  
  22.                 + "' width='139' height='104' title=''/>"
  23.                 + "<p style='margin:0;line-height:1.5;font-size:13px;text-indent:2em'>"
  24.                 + hotelArray[o].hotelAddress + "</p>" + "</div>";  
  25.         // 設定label 文字框的樣式
  26.         hotelNameLabel.setStyle({  
  27.             "borderColor" : "red",  
  28.             "color" : "red",  
  29.             "cursor" : "pointer"
  30.         });  
  31.         console.log(hotelArray[o].srcImage + sContent);  
  32.         createMark = function(lng, lat, info_html) {  
  33.             var _marker = new BMap.Marker(new BMap.Point(lng, lat));  
  34.             _marker.addEventListener("click"function(e) {  
  35.                 this.openInfoWindow(new BMap.InfoWindow(info_html));  
  36.             });  
  37.             _marker.addEventListener("mouseover"function(e) {  
  38.                 this.setTitle("位於: " + lng + "," + lat);  
  39.             });  
  40.             return _marker;  
  41.         };  
  42.         var marker = createMark(hotelArray[o].lng, hotelArray[o].lat, sContent);  
  43.         map.addOverlay(marker);  
  44.         marker.setLabel(hotelNameLabel); // 新增百度label
  45.     }  
  46.     city = new BMap.LocalSearch(map, {  
  47.         renderOptions : {  
  48.             map : map,  
  49.             autoViewport : true
  50.         }  
  51.     }); // 地圖顯示到查詢結果處
  52. }  
  53. function searchCity() {  
  54.     var s = $("#searchValue").val();  
  55.     console.log(s);  
  56.     city.search(s); // 查詢城市
  57. }  
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 出標註物件。再為每個標註物件新增監聽方法

在新增監聽方法的時候,會遇到,不管點選哪一個標註,都是輸出最後一條的資訊。

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

如下

[javascript] view plaincopyprint?
  1. var     createMark = function(lng, lat, info_html) {  
  2.             var _marker = new BMap.Marker(new BMap.Point(lng, lat));  
  3.             _marker.addEventListener("click"function(e) {  
  4.                 this.openInfoWindow(new BMap.InfoWindow(info_html));  
  5.             });  
  6.             _marker.addEventListener("mouseover"function(e) {  
  7.                 this.setTitle("位於: " + lng + "," + lat);  
  8.             });  
  9.             return _marker;  
  10.         };  
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標註之後,立刻加監聽。

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