这两天在学习百度地图的API，结合所给的Demo，实现了一个比较简单的功能。在地图上制作自己公司的地址标签。

首先获取标签的Point对象。

<htmlxmlns="http://www.w3.org/1999/xhtml"><head><title>根据地址查询经纬度</title><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"></head><body><scripttype="text/javascript"src="http://api.map.baidu.com/api?v=1.3"></script><div>要查询的地址：<inputid="text_"type="text"value="广州白云山"/>查询结果(经纬度)：<inputid="result_"type="text"/><inputtype="button"value="查询"onclick="searchByStationName();"/><!--地图显示容器--><divid="container"style="position:absolute;margin-top:30px;width:730px;height:590px;top:50;border:1pxsolidgray;overflow:hidden;"></div><scripttype="text/javascript">varmap=newBMap.Map("container");map.enableScrollWheelZoom();//启用滚轮放大缩小，默认禁用map.enableContinuousZoom();//启用地图惯性拖拽，默认禁用map.addControl(newBMap.NavigationControl());//添加默认缩放平移控件map.addControl(newBMap.OverviewMapControl());//添加默认缩略地图控件map.addControl(newBMap.OverviewMapControl({isOpen:true,anchor:BMAP_ANCHOR_BOTTOM_RIGHT}));//右下角，打开map.centerAndZoom("广州",12);//查询函数varlocalSearch=newBMap.LocalSearch(map);localSearch.enableAutoViewport();//允许自动调节窗体大小functionsearchByStationName(){　　varkeyword=document.getElementById("text_").value;　　localSearch.setSearchCompleteCallback(function(searchResult){　　　　varpoi=searchResult.getPoi(0);　　　　document.getElementById("result_").value=poi.point.lng+"|"+poi.point.lat;//获取经度和纬度，将结果显示在文本框中　　　　map.centerAndZoom(poi.point,13);　　});　　localSearch.search(keyword);}</script></body></html>

然后就是制作标签了。这里以广州白云山为例。查询结果如下


这样就可以查到自己公司所在地址的经纬度。

在把下面的标注点数组变量修改成自己的公司即可。其中的piont为自己公司的point。

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=gb-2312"/></head><body>!--百度地图---><scripttype="text/javascript"src="http://api.map.baidu.com/api?key=&v=1.1&services=true"></script><divid="dituContent"></div><scripttype="text/javascript">//创建和初始化地图函数：functioninitMap(){createMap();//创建地图setMapEvent();//设置地图事件addMapControl();//向地图添加控件addMarker();//向地图中添加marker}//创建地图函数：functioncreateMap(){varmap=newBMap.Map("dituContent");//在百度地图容器中创建一个地图varpoint=newBMap.Point(113.388275,22.94326);//定义一个中心点坐标map.centerAndZoom(point,18);//设定地图的中心点和坐标并将地图显示在地图容器中window.map=map;//将map变量存储在全局}//地图事件设置函数：functionsetMapEvent(){map.enableDragging();//启用地图拖拽事件，默认启用(可不写)map.enableScrollWheelZoom();//启用地图滚轮放大缩小map.enableDoubleClickZoom();//启用鼠标双击放大，默认启用(可不写)map.enableKeyboard();//启用键盘上下左右键移动地图}//地图控件添加函数：functionaddMapControl(){}//标注点数组varmarkerArr=[{title:"明珠电气股份有限公司",content:"电话：200-XXX-XXX<br/>地址：广州市番禺区东环路118号",point:"113.38714|22.957759",isOpen:1,icon:{w:23,h:25,l:23,t:21,x:9,lb:12}}];//这里的point是通过上一页面中查询出来的。//创建markerfunctionaddMarker(){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);}})()}}//创建InfoWindowfunctioncreateInfoWindow(i){varjson=markerArr[i];variw=newBMap.InfoWindow("<bclass='iw_poi_title'title='"+json.title+"'>"+json.title+"</b><divclass='iw_poi_content'>"+json.content+"</div>");returniw;}//创建一个IconfunctioncreateIcon(json){varicon=newBMap.Icon("http://app.baidu.com/map//Public/Home//Public/Home//Public/Home/p_w_picpaths/us_mk_icon.png",newBMap.Size(json.w,json.h),{p_w_picpathOffset:newBMap.Size(-json.l,-json.t),infoWindowOffset:newBMap.Size(json.lb+5,1),offset:newBMap.Size(json.x,json.h)})returnicon;}initMap();//创建和初始化地图</script></body></html>

实现效果图如下：