网页中调用百度地图的方法及模板.doc

网页中调用百度电子地图的方法及代码模板大家先看一下效果：下面介绍方法：1、首先打开百度地图的坐标拾取网页/lbsapi/getpoint/index.html ，找到你标注的地点的坐标，复制下来。2、调用下面的代码，将其中的红色部分改为你复制的坐标，注意有两处要改，下面一处经度和纬度之间是“|”不是逗号。3、将蓝色部分的信息改为你要显示的信息。4、其中“(point,15)”是改默认打开尺寸的代码详细解释为：百度地图自身有17个级别，如下：1. 20m,50m,100m,200m,500m,1km,2km,5km,10km,20km,25km,50km,100km,200km,500km,1000km,2000km但是，提供的开发包只支持16个级别， Level: 183, 比例尺如下：1. 50m,100m,200m,500m,1km,2km,5km,10km,20km,25km,50km,100km,200km,500km,1000km,2000km 模板中point级别为15 即默认放大倍数为500m，如果你想更改为默认放大到10km，把粉色部分15改为11即可。5、绿色部分为div部分，你该怎么改就怎么改，可以直接改style的部分，也可以在CSS中改。改好了就OK了。html,bodymargin:0;padding:0; .iw_poi_title color:#CC5522;font-size:14px;font-weight:bold;overflow:hidden;padding-left:13px;white-space:nowrap .iw_poi_content font:12px arial,sans-serif;overflow:visible;padding-top:4px;white-space:-moz-pre-wrap;word-wrap:break-word          /创建和初始化地图函数： function initMap() createMap();/创建地图 setMapEvent();/设置地图事件 addMapControl();/向地图添加控件 addMarker();/向地图中添加marker /创建地图函数： function createMap() var map = new BMap.Map(dituContent);/在百度地图容器中创建一个地图 var point = new BMap.Point(120.848025,31.577512);/定义一个中心点坐标 map.centerAndZoom(point,15);/设定地图的中心点和坐标并将地图显示在地图容器中 window.map = map;/将map变量存储在全局 /地图事件设置函数： function setMapEvent() map.enableDragging();/启用地图拖拽事件，默认启用(可不写) map.enableScrollWheelZoom();/启用地图滚轮放大缩小 map.enableDoubleClickZoom();/启用鼠标双击放大，默认启用(可不写) map.enableKeyboard();/启用键盘上下左右键移动地图 /地图控件添加函数： function addMapControl() /向地图中添加缩放控件var ctrl_nav = new BMap.NavigationControl(anchor:BMAP_ANCHOR_TOP_LEFT,type:BMAP_NAVIGATION_CONTROL_LARGE);map.addControl(ctrl_nav); /向地图中添加缩略图控件var ctrl_ove = new BMap.OverviewMapControl(anchor:BMAP_ANCHOR_BOTTOM_RIGHT,isOpen:1);map.addControl(ctrl_ove); /向地图中添加比例尺控件var ctrl_sca = new BMap.ScaleControl(anchor:BMAP_ANCHOR_BOTTOM_LEFT);map.addControl(ctrl_sca); /标注点数组 var markerArr = title:常熟市潇湘进出口贸易有限公司,content:电话址：江苏省苏州市常熟市常昆工业园荣升路9号网址：,point:120.848025|31.577512,isOpen:0,icon:w:21,h:21,l:0,t:0,x:6,lb:5; /创建marker function addMarker() for(var i=0;imarkerArr.length;i+) var json = markerArri; var p0 = json.point.split(|)0; var p1 = json.point.split(|)1; var point = new BMap.Point(p0,p1);var iconImg = createIcon(json.icon); var marker = new BMap.Marker(point,icon:iconImg);var iw = createInfoWindow(i);var label = new BMap.Label(json.title,offset:new BMap.Size(json.icon.lb-json.icon.x+10,-20);marker.setLabel(label); map.addOverlay(marker); label.setStyle( borderColor:#808080, color:#333, cursor:pointer );(function()var index = 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 function createInfoWindow(i) var json = markerArri; var iw = new BMap.InfoWindow( + json.title + +json.content+); return iw; /创建一个Icon function createIcon(json) var icon = new BMap.Icon(/image/us_cursor.gif, new BMap.Size(js