关于百度地图 BMap.InfoWindow 只显示最后一条信息解决方法，以及完整应用示例...

最新推荐文章于 2023-10-08 16:19:05 发布

weixin_34290390

最新推荐文章于 2023-10-08 16:19:05 发布

阅读量484

点赞数

文章标签： json javascript python ViewUI

原文链接：https://my.oschina.net/u/731676/blog/268109

版权

2019独角兽企业重金招聘Python工程师标准>>>

之前在做技术试验的时候，用到百度地图api的东西了，再做的时候遇到一些问题，后来解决了。并且自己封装了一个显示的方法。

总共有三个文件。

以下是代码：

hotel.js

var hotel =[

{"lat" : "39.914780580","lng":"116.416859386","hotelName" : "北京饭店","hotelAddress":"地址：东城区东长安街33号（地铁王府井站A口西侧）","titleName":"国家旅游局评定星级为5星级","srcImage":"hotel.jpg"},

{"lat" : "39.943337708","lng":"116.279685299","hotelName" : "北京美泉宫饭店","hotelAddress":"地址：北京市海淀区西四环北路125号（四季青桥往南1000米）","titleName":"豪华型酒店","srcImage":"hotel.jpg"},

{"lat" : "39.964783886","lng":"116.353210814","hotelName" : "北京艺海商务酒店","hotelAddress":"地址：北京市海淀区学院南路33号（明光桥西500米、四道口金五星百货旁边）","titleName":"高档型酒店","srcImage":"hotel.jpg"},

{"lat" : "40.006941490","lng":"116.378138466","hotelName" : "北京亚奥国际酒店（原劳动大厦）","hotelAddress":"地址：东城区东长安街33号（地铁王府井站A口西侧）","titleName":"国家旅游局评定星级为5星级","srcImage":"hotel.jpg"},

{"lat" : "39.915873223","lng":"116.429786821","hotelName" : "北京好苑建国酒店","hotelAddress":"地址：北京市东城区建国门内大街17号（朝阳门南小街与建国门内大街交汇处北侧路北）","titleName":"国家旅游局评定星级为5星级","srcImage":"hotel.jpg"},

{"lat" : "39.907550366","lng":"116.423456812","hotelName" : "北京新侨诺富特饭店","hotelAddress":"地址：东城区东长安街33号（地铁王府井站A口西侧）","titleName":"国家旅游局评定星级为5星级","srcImage":"hotel.jpg"}

];

上面是构造的json数据。
mapView.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"

pageEncoding="UTF-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>地图显示--${webname }</title>

<%@ include file="/view/include/global.jsp"%>

<script type="text/javascript" src="http://api.map.baidu.com/api?&v=1.4">

</script>

<script type="text/javascript" src="${ctx}/js/761js/citysearch.js"></script>

<script type="text/javascript" src="${ctx}/view/map/hotel.js"></script>

<script type="text/javascript" src="${ctx}/view/map/newUtil.js"></script>

<style type="text/css">

#rightContainer ul {list-style:none;margin:0px; color :red; } 

#rightContainer li {float:center;}

</style>

</head>

<body>

<p>

<input id="searchValue" name="searchValue" type="text" size="25" /> <input

id="search" name="search" type="hidden" /> <input type="button"

border="3" value="搜索" onclick="searchCity()" />

</p>

<div style="width: 75%; height: 800px; border: 1px solid gray; float: left"

id="container"></div>

<div style="width: 20%; height: 800px; border: 1px solid gray; float: right"

id="rightContainer"></div>

<script type="text/javascript">

baiduMapFunction("container", hotel);

FlightCity('searchValue', 'search');

</script>

</body>

</html>

以上为jsp页面

newUtil.js

function baiduMapFunction(divId, hotelArray) {

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"

});

//创建marker闭包，添加监听

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;

};

function convertS(id){

var aNew = id.replace(".","1");

return aNew

}

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

marker.id = convertS(hotelArray[o].lng);

map.addOverlay(marker);

// 添加百度label

marker.setLabel(hotelNameLabel); 

//开始处理右边div列表中的数据，然后开始添加点击事件

function listHotelDivFunction(rightContainer, marker,lng,name,sContent) {


$("#" + rightContainer).append("<li id="+ convertS(lng)+">" +name + "</li>");

$("#"+convertS(lng)).click(function(){

marker.openInfoWindow(new BMap.InfoWindow(sContent));

});


}

listHotelDivFunction("rightContainer", marker,hotelArray[o].lng,hotel[o].hotelName,sContent);

}



// 地图显示到查询结果处

city = new BMap.LocalSearch(map, {

renderOptions : {

map : map,

autoViewport : true

}

}); 


}

//查找城市

function searchCity() {

var s = $("#searchValue").val();

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;

};

转载于:https://my.oschina.net/u/731676/blog/268109