转 http://blog.csdn.net/guo_love_peng/article/details/8674230
今天遇到这个问题了。后面再网上搜搜,发现都是你抄我,我转载你的,后来无意看到一篇文章,说是用闭包后来解决了。现在把问题解决方法发出来
- 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); // 查找城市
- }
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;
- };
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标注之后,立刻加监听。
这样之后就解决了这个问题了