之前在做技术试验的时候，用到百度地图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><br><br>
以上为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><br/>");
$("#"+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;
};
欢迎来到这里！
我们正在构建一个小众社区，大家在这里相互信任，以平等 • 自由 • 奔放的价值观进行分享交流。最终，希望大家能够找到与自己志同道合的伙伴，共同成长。
注册 关于