JavaScript 百度地图api 调用,百度api demo缩略图

一个学校校区项目 要增加百度地图,显示各个校区的具体地址,校区地址要接入百度地图

<!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>

By lxcss

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注