代码如下：

 

　　

 

　　

 

　　

 

　　

 

　　

 

　　

 

　　<scripttype="text/javascript">//创建和初始化地图函数：

 

　　functioninitMap(){

 

　　createMap();//创建地图

 

　　setMapEvent();//设置地图事件

 

　　addMapControl();//向地图添加控件

 

　　addMarker();//向地图中添加marker

 

　　}

 

　　//创建地图函数：

 

　　functioncreateMap(){

 

　　varmap=newBMap.Map("dituContent");//在百度地图容器中创建一个地图

 

　　varpoint=newBMap.Point(106.54904,29.60076);//定义一个中心点坐标

 

　　map.centerAndZoom(point,18);//设定地图的中心点和坐标并将地图显示在地图容器中

 

　　window.map=map;//将map变量存储在全局

 

　　}

 

　　//地图事件设置函数：

 

　　functionsetMapEvent(){

 

　　map.enableDragging();//启用地图拖拽事件，默认启用(可不写)

 

　　map.enableScrollWheelZoom();//启用地图滚轮放大缩小

 

　　map.enableDoubleClickZoom();//启用鼠标双击放大，默认启用(可不写)

 

　　map.enableKeyboard();//启用键盘上下左右键移动地图

 

　　}

 

　　//地图控件添加函数：

 

　　functionaddMapControl(){

 

　　//向地图中添加缩放控件

 

　　varctrl_nav=newBMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:BMAP_NAVIGATION_CONTROL_LARGE});

 

　　map.addControl(ctrl_nav);

 

　　//向地图中添加缩略图控件

 

　　varctrl_ove=newBMap.OverviewMapControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT,isOpen:1});

 

　　map.addControl(ctrl_ove);

 

　　//向地图中添加比例尺控件

 

　　varctrl_sca=newBMap.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_LEFT});

 

　　map.addControl(ctrl_sca);

 

　　}

 

　　//标注点数组

 

　　varmarkerArr=[{title:"公司名称",content:"公司地址",point:"106.549449|29.600407",isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}}

 

　　];

 

　　//创建marker

 

　　functionaddMarker(){

 

　　for(vari=0;i<markerArr.length;i++){

 

　　varjson=markerArr[i];

 

　　varp0=json.point.split("|")[0];

 

　　varp1=json.point.split("|")[1];

 

　　varpoint=newBMap.Point(p0,p1);

 

　　variconImg=createIcon(json.icon);

 

　　varmarker=newBMap.Marker(point,{icon:iconImg});

 

　　variw=createInfoWindow(i);

 

　　varlabel=newBMap.Label(json.title,{"offset":newBMap.Size(json.icon.lb-json.icon.x+10,-20)});

 

　　marker.setLabel(label);

 

　　map.addOverlay(marker);

 

　　label.setStyle({

 

　　borderColor:"#808080",

 

　　color:"#333",

 

　　cursor:"pointer"

 

　　});

 

　　(function(){

 

　　varindex=i;

 

　　var_iw=createInfoWindow(i);

 

　　var_marker=marker;

 

　　_marker.addEventListener("click",function(){

 

　　this.openInfoWindow(_iw);

 

　　});

 

　　_iw.addEventListener("open",function(){

 

　　_marker.getLabel().hide();

 

　　})

 

　　_iw.addEventListener("close",function(){

 

　　_marker.getLabel().show();

 

　　})

 

　　label.addEventListener("click",function(){

 

　　_marker.openInfoWindow(_iw);

 

　　})

 

　　if(!!json.isOpen){

 

　　label.hide();

 

　　_marker.openInfoWindow(_iw);

 

　　}

 

　　})()

 

　　}

 

　　}

 

　　//创建InfoWindow

 

　　functioncreateInfoWindow(i){

 

　　varjson=markerArr[i];

 

　　variw=newBMap.InfoWindow("<bclass='iw_poi_title'title='"+json.title+"'>"+json.title+"</b><pclass='iw_poi_content'>"+json.content+"</p>");

 

　　returniw;

 

　　}

 

　　//创建一个Icon

 

　　functioncreateIcon(json){

 

　　varicon=newBMap.Icon("http://app.baidu.com/map/images/us_mk_icon.png",newBMap.Size(json.w,json.h),{imageOffset:newBMap.Size(-json.l,-json.t),infoWindowOffset:newBMap.Size(json.lb+5,1),offset:newBMap.Size(json.x,json.h)})

 

　　returnicon;

 

　　}

 

　　initMap();//创建和初始化地图

 

　　</script>

 

　　<!--引用百度地图API-->

 

　　<styletype="text/css">

 

　　.iw_poi_title{color:#CC5522;font-size:14px;font-weight:bold;overflow:hidden;padding-right:13px;white-space:nowrap}

 

　　.iw_poi_content{font:12pxarial,sans-serif;overflow:visible;padding-top:4px;white-space:-moz-pre-wrap;word-wrap:break-word}

 

　　#dituContentpspan.BMap_Marker.BMap_noprint{background:url('/images/marker_red.png')!important;height:26px!important;}

 

　　#dituContent.BMapLabel{background-color:white;border:0px!important;left:15px!important;font-size:14px!important;font-weight:bold!important;color:Red!important;font-family:'宋体'!important;}

 

　　#dituContentspan.BMap_Markerp{width:0px!important;height:0px!important;}

 

　　</style>






本文转载自中文网