<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script src="/js/jquery-1.10.1.min.js" type="text/javascript"></script>
<style type="text/css">
body, html, #allmap
{
width: 100%;
height: 100%;
overflow: hidden;
margin: 0;
font-family: "微软雅黑";
}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=44GDhGR0o4mDEoC3w2yFEkFH"></script>
<script type="text/javascript" src="http://developer.baidu.com/map/jsdemo/demo/changeMore.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.js"></script>
<link rel="stylesheet" href="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.css" />
<title>百度地图API 批量添加 带检索功能的信息窗口</title>
</head>
<body>
<div id="allmap">
</div>
<div id="img" style="display: none">
请先选择城市<img src="/images/001.jpg" width="708px" height="486px" /></div>
</body> <script language="javascript" type="text/javascript">
var _subList = <%=strHtml%>
var _citys = '<%=strCity %>'
var gpsPoints = [];
if (_citys != "") {
// 百度地图API功能
var map = new BMap.Map("allmap"); // 创建Map实例
map.centerAndZoom(_citys, 13); // 初始化地图,用城市名设置地图中心点
map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
var navigationControl = new BMap.NavigationControl({
// 靠左上角位置
anchor: BMAP_ANCHOR_TOP_LEFT,
// LARGE类型
type: BMAP_NAVIGATION_CONTROL_LARGE,
// 启用显示定位
enableGeolocation: true
}); function callback(xyResults) {
var xyResult = null;
var point = new Array(); //存放标注点经纬信息的数组
var marker = new Array(); //存放标注点对象的数组
var content = new Array(); //存放提示信息窗口对象的数组
var searchInfoWindow = new Array(); //存放检索信息窗口对象的数组 for (var index in xyResults) {
xyResult = xyResults[index];
if (xyResult.error != 0) { continue; } //出错就直接返回;
point[index] = new BMap.Point(xyResult.x, xyResult.y);
marker[index] = new BMap.Marker(point[index]); content[index] = '<div style="margin:0;line-height:20px;padding:2px;">' +
'<img src="' + _subList.Table[index].jianjieImg + '" alt="酒店图片" style="float:right;zoom:1;overflow:hidden;width:100px;height:100px;margin-left:3px;"/>' +
'地址：' + _subList.Table[index].address + '<br/>电话：' + _subList.Table[index].tele + '<br/>' +
'</div>';
//创建检索信息窗口对象
//var searchInfoWindow = null;
searchInfoWindow[index] = new BMapLib.SearchInfoWindow(map, content[index], {
title: '<a href="/hotel/HotelDetail.aspx?sub=' + _subList.Table[index].substoreid + '" target="_blank">' + _subList.Table[index].name + '</a>', //标题
width: 290, //宽度
height: 105, //高度
panel: "panel", //检索结果面板
enableAutoPan: true, //自动平移
searchTypes: [
BMAPLIB_TAB_SEARCH, //周边检索
BMAPLIB_TAB_TO_HERE, //到这里去
BMAPLIB_TAB_FROM_HERE //从这里出发
]
});
marker[index].enableDragging(); //marker可拖拽 //添加点击事件
// marker[index].addEventListener("click", function (e) {
// searchInfoWindow[index].open(marker[index]);
// })
//添加点击事件
marker[index].addEventListener("click",
(function (k) {
// js 闭包
return function () {
//map.centerAndZoom(point[k], 18);
//marker[k].openInfoWindow(info[k]);
searchInfoWindow[k].open(marker[k]);
}
})(index)
);
map.addOverlay(marker[index]); //在地图中添加marker
if (index == 0) {
map.setCenter(point[index]); // 由于写了这句，每一个被设置的点都是中心点的过程
}
}
} if (_subList != "") {
for (var i = 0; i < _subList.Table.length; i++) {
gpsPoints.push(new BMap.Point(_subList.Table[i].lon, _subList.Table[i].lat));
} setTimeout(function () {
BMap.Convertor.transMore(gpsPoints, 0, callback); //一秒之后开始进行坐标转换。参数2，表示是从GCJ-02坐标到百度坐标。参数0，表示是从GPS到百度坐标
}, 1000);
} } else {
document.getElementById("allmap").style.display = "none";
document.getElementById("img").style.display = "block";
}
</script>
</html>
百度地图API 批量添加 带检索功能的信息窗口