百度地图的使用

百度地图使用介绍目录效果图：.......................................................................................................................1代码：...........................................................................................................................1使用方法.......................................................................................................................5修改方法.......................................................................................................................5修改初始地理坐标.........................................................................................................6百度地图提供了丰富的查询接口，这里做一下推广，演示如何使用它效果图：代码：!DOCTYPEhtmlPUBLIC-//W3C//DTDXHTML1.0Transitional//EN==Content-Typecontent=text/html;charset=gb2312/metaname=keywordscontent=百度地图,百度地图API，百度地图自定义工具，百度地图所见即所得工具/metaname=descriptioncontent=百度地图API自定义地图，帮助用户在可视化操作下生成百度地图/title百度地图API自定义地图/title!--引用百度地图API--styletype=text/csshtml,body{margin:0;padding:0;}.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}/*去除百度地图版权*/.anchorBL{display:none;}/stylescripttype=text/javascriptsrc==&v=1.1&services=true/script/headbody!--百度地图容器--divstyle=width:99%s;height:380px;border:#cccsolid1px;id=dituContent/div/bodyscripttype=text/javascript//创建和初始化地图函数：functioninitMap(){createMap();//创建地图setMapEvent();//设置地图事件addMapControl();//向地图添加控件addMarker();//向地图中添加marker}//创建地图函数：functioncreateMap(){varmap=newBMap.Map(dituContent);//在百度地图容器中创建一个地图varpoint=newBMap.Point(105.945382,29.361842);//定义一个中心点坐标map.centerAndZoom(point,15);//设定地图的中心点和坐标并将地图显示在地图容器中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);}//标注点数组//这里修改参数，title表示标题；content表示内容；point表示初始地理坐标varmarkerArr=[{title:标题,content:内容,point:105.945346|29.356868,isOpen:1,icon:{w:23,h:25,l:46,t:21,x:9,lb:12}}];//创建markerfunctionaddMarker(){for(vari=0;imarkerArr.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+/bdivclass='iw_poi_content'+json.content+/div);returniw;}//创建一个IconfunctioncreateIcon(json){varicon=newBMap.Icon((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/html使用方法新建记事本，复制代码到其中保存，并修改扩展名txt为html双击打开变成修改方法用记事本打开Ctrl+f搜索‘标注点数组’其中有句话varmarkerArr=[{title:标题,content:内容,point:105.945346|29.356868,isOpen:1,icon:{w:23,h:25,l:46,t:21,x:9,lb:12}}修改title:新的标题;ontent:新的内容;Ctrl+S保存后效果修改初始地理坐标point:105.945346|29.356868首先要获得你需要的百度地理坐标访问百度地图提供的地图拾取系统比如现在要获取深圳的坐标百度一下关键字‘深圳’点一下地图中‘深圳’的某一个位置坐标出现在右上角了然后去修改上述的point:105.945346|29.356868为point:114.063525|22.559997Ctrl+S保存后效果这个时候，希望把标记出现在地图中心Ctrl+F输入‘定义一个中心’其中varpoint=newBMap.Point(105.945382,29.361842);//定义一个中心点坐标修改为深圳的坐标由于所选深圳坐标为point:114.063525|22.559997所以，varpoint=newBMap.Point(114.063525,22.559997);//定义一个中心点坐标Ctrl+S保存后效果