<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<title>地图</title>
<style type="text/css">
body, html{width: 100%;height: 100%; margin:0;font-family:"微软雅黑";}
#allmap{height:100%;width:100%;}
#r-result{width:100%;}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=txa9G9LvtXynqOciUIL56eBs"></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" />
<script src="jquery.js"></script>
</head>
<body>
<div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
var mapInfos = [
{"id": 0, "title": "", "contents": "通讯地址：<br/>联系电话：<br/>办公时间：周一至周五，9:00—17:00“}
...
];
var map = new BMap.Map("allmap"); // 创建Map实例
function map_init() {
map.centerAndZoom(new BMap.Point(120.382267, 36.065791), 11); // 初始化地图,设置中心点坐标和地图级别
map.setCurrentCity("青岛"); // 设置地图显示的城市 此项是必须设置的
map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
//增加所有分局标注
for (var i = 0; i < mapInfos.length; i++) {
var point = new BMap.Point(mapInfos[i].x, mapInfos[i].y);
addMarker(point,i);
}
}
function addMarker(point,i) {
// 创建图标对象
var myIcon = new BMap.Icon("http://api.map.baidu.com/img/markers.png", new BMap.Size(23, 25), {
offset: new BMap.Size(10, 25), // 指定定位位置
imageOffset: new BMap.Size(0, 0 - 11 * 25) // 设置图片偏移
});
var marker = new BMap.Marker(point, {icon: myIcon});
//对标注绑定点击事件
marker.addEventListener('click',function(){
var content = '<div style="margin:0;">' + mapInfos[i].contents + '</div>';
var searchInfoWindow = new BMapLib.SearchInfoWindow(map, content, {
title: mapInfos[i].title, //标题
width: 280, //宽度
height: 105, //高度
panel: "panel", //检索结果面板
enableAutoPan: true, //自动平移
searchTypes: [
BMAPLIB_TAB_SEARCH, //周边检索
BMAPLIB_TAB_TO_HERE, //到这里去
BMAPLIB_TAB_FROM_HERE //从这里出发
]
});
searchInfoWindow.open(marker); //在marker上打开检索信息串口
});
map.addOverlay(marker);
}
$(function () {
map_init();
});
</script>
