一个学校校区项目 要增加百度地图,显示各个校区的具体地址,校区地址要接入百度地图
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="keywords" content="">
<meta name="description" content="">
<style type="text/css">
body,html{
height: 100%;
}
</style>
</head>
<body>
<div style="height: 100%; width: 100%;" id="allmap"></div>
<script src="http://api.map.baidu.com/api?v=2.0&ak=UnZrS2DneK67z8chPl3TSMRZG4WFhvLx"></script>
<script type="text/javascript">
//创建和初始化地图函数:
function initMap(){
createMap();//创建地图
setMapEvent();//设置地图事件
addMapControl();//向地图添加控件
addMapOverlay();//向地图添加覆盖物
}
function createMap(){
map = new BMap.Map("allmap");
map.centerAndZoom(new BMap.Point(114.518402,38.041793),12);
}
function setMapEvent(){
map.enableScrollWheelZoom();
map.enableKeyboard();
map.enableDragging();
map.enableDoubleClickZoom()
}
function addClickHandler(target,window){
target.addEventListener("click",function(){
target.openInfoWindow(window);
});
}
function addMapOverlay(){
var markers = [
{content:"<p class='map-p'>地址:中山东路东明桥(民心河)东100米路南</p>",title:"中山校区",imageOffset: {width:-46,height:-21},position:{lat:38.048469,lng:114.548223}},
{content:"<p class='map-p'>地址:谈固南大街与东岗路交口南行200米路西</p>",title:"东南校区",imageOffset: {width:-46,height:-21},position:{lat:38.019236,lng:114.56865}},
{content:"<p class='map-p'>地址:富强大街与槐安路交口西北角怀特珠宝城东门2楼</p>",title:"富强校区",imageOffset: {width:-46,height:-21},position:{lat:38.028362,lng:114.529301}},
{content:"<p class='map-p'>地址:槐安西路与师范街交口西南角中苑商务大厦D座4楼</p>",title:"槐安校区",imageOffset: {width:-46,height:-21},position:{lat:38.0307,lng:114.471985}},
{content:"<p class='map-p'>地址:富强大街43中西门南侧,嘉仕商务中心6楼</p>",title:"43中校区",imageOffset: {width:-46,height:-21},position:{lat:38.022609,lng:114.530375}},
{content:"<p class='map-p'>地址:建设北大街与胜利大街交汇处,浙江大酒店2楼</p>",title:"运河桥校区",imageOffset: {width:-46,height:-21},position:{lat:38.078463,lng:114.518}},
{content:"<p class='map-p'>地址:翟营大街槐中路交口北行50米路东</p>",title:"翟营校区",imageOffset: {width:-46,height:-21},position:{lat:38.036569,lng:114.561204}},
{content:"<p class='map-p'>地址:友谊大街与新华叉路交口西行50米路北二楼</p>",title:"新华校区",imageOffset: {width:-46,height:-21},position:{lat:38.054889,lng:114.457033}},
{content:"<p class='map-p'>地址:中山东路与谈固东街交口北行200米路东,东方魅力C座3楼</p>",title:"谈固校区",imageOffset: {width:-46,height:-21},position:{lat:38.052587,lng:114.576851}},
{content:"<p class='map-p'>地址:建华南大街与裕泰路交口东行200米路北</p>",title:"众美校区",imageOffset: {width:-46,height:-21},position:{lat:38.001316,lng:114.556581}},
{content:"<p class='map-p'>地址:槐安东路与谈固南大街交口裕华区第五幼儿园东50米三楼</p>",title:"金马校区",imageOffset: {width:-46,height:-21},position:{lat:38.032056,lng:114.567229}},
{content:"<p class='map-p'>地址:煤机街与丰雅路交口西北角润德购物广场3楼</p>",title:"紫晶悦城校区",imageOffset: {width:-46,height:-21},position:{lat:38.067493,lng:114.556228}},
{content:"<p class='map-p'>地址:珠峰大街与闽江道交口东南角想象国际底商2楼</p>",title:"想象国际校区",imageOffset: {width:-46,height:-21},position:{lat:38.034306,lng:114.61}},
{content:"<p class='map-p'>地址:育英东路99号3楼厦B座五层</p>",title:"藁城校区",imageOffset: {width:-46,height:-21},position:{lat:38.021979,lng:114.862932}},
];
for(var index = 0; index < markers.length; index++ ){
var point = new BMap.Point(markers[index].position.lng,markers[index].position.lat);
var marker = new BMap.Marker(point,{icon:new BMap.Icon("http://api.map.baidu.com/lbsapi/createmap/images/icon.png",new BMap.Size(20,25),{
imageOffset: new BMap.Size(markers[index].imageOffset.width,markers[index].imageOffset.height)
})});
var label = new BMap.Label(markers[index].title,{offset: new BMap.Size(25,5)});
var opts = {
width: 200,
title: markers[index].title,
enableMessage: false
};
var infoWindow = new BMap.InfoWindow(markers[index].content,opts);
marker.setLabel(label);
addClickHandler(marker,infoWindow);
map.addOverlay(marker);
};
}
//向地图添加控件
function addMapControl(){
var scaleControl = new BMap.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_LEFT});
scaleControl.setUnit(BMAP_UNIT_IMPERIAL);
map.addControl(scaleControl);
var navControl = new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:3});
map.addControl(navControl);
var overviewControl = new BMap.OverviewMapControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT,isOpen:false});
map.addControl(overviewControl);
}
var map;
initMap();
</script>
</body>
</html>