2022年网页中调用百度地图的方法及模板可用 .pdf

《2022年网页中调用百度地图的方法及模板可用 .pdf》由会员分享，可在线阅读，更多相关《2022年网页中调用百度地图的方法及模板可用 .pdf（6页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、网页中调用百度电子地图的方法及代码模板大家先看一下效果：下面介绍方法：1、首先打开百度地图的坐标拾取网页 http:/ ，找到你标注的地点的坐标，复制下来。2、调用下面的代码，将其中的红色部分改为你复制的坐标，注意有两处要改，下面一处经度和纬度之间是“| ”不是逗号。3、将蓝色部分的信息改为你要显示的信息。4、其中“ (point, 15)”是改默认打开尺寸的代码详细解释为：名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 1 页，共 6 页 - - - - - - - - - 百度地

2、图自身有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 级别为

3、 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

4、;overflow:visible;padding-top:4px;white-space:-moz-pre-wrap;word-wrap:break-word             名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 2 页，共 6 页 - - - - - - - - - /创建和初始化地图函数：function initMap() createMap();/ 创建地图setMa

5、pEvent();/ 设置地图事件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 变量存储在全局 /地图事件

6、设置函数：function setMapEvent() map.enableDragging();/启用地图拖拽事件，默认启用(可不写 ) map.enableScrollWheelZoom();/启用地图滚轮放大缩小map.enableDoubleClickZoom();/启用鼠标双击放大，默认启用(可不写 ) map.enableKeyboard();/启用键盘上下左右键移动地图 /地图控件添加函数：function addMapControl() /向地图中添加缩放控件var ctrl_nav = new BMap.NavigationControl(anchor:BMAP_ANCHOR

7、_TOP_LEFT,type:BMAP_NAVIGATION_CONTROL_LARGE); 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 3 页，共 6 页 - - - - - - - - - map.addControl(ctrl_nav); /向地图中添加缩略图控件var ctrl_ove = new BMap.OverviewMapControl(anchor:BMAP_ANCHOR_BOTTOM_RIGHT,isOpen:1); map.addControl(ctrl_o

8、ve); /向地图中添加比例尺控件var ctrl_sca = new BMap.ScaleControl(anchor:BMAP_ANCHOR_BOTTOM_LEFT); map.addControl(ctrl_sca); /标注点数组var markerArr = title: 常熟市潇湘进出口贸易有限公司,content: 电话：+86-0512-52885915 地址：江苏省苏州市常熟市常昆工业园荣升路9 号网址：http:/www.packing-,point: 120.848025|31.577512 ,isOpen:0,icon:w:21,h:21,l:0,t:0,x:6,lb:

9、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 = createInfoWind

10、ow(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); 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 4 页，共 6 页 - - - - - - - - - label.setStyle( borderColor:#808080, color:#

11、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().sho

12、w(); ) label.addEventListener(click,function() _marker.openInfoWindow(_iw); ) if(!json.isOpen) label.hide(); _marker.openInfoWindow(_iw); )() /创建 InfoWindow function createInfoWindow(i) var json = markerArri; 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 5 页，共 6 页 -

13、 - - - - - - - - var iw = new BMap.InfoWindow( + json.title + +json.content+); return iw; /创建一个 Icon function createIcon(json) var icon = new BMap.Icon(http:/ new BMap.Size(json.w,json.h),imageOffset: new BMap.Size(-json.l,-json.t),infoWindowOffset:new BMap.Size(json.lb+5,1),offset:new BMap.Size(json.x,json.h) return icon; initMap();/ 创建和初始化地图 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 6 页，共 6 页 - - - - - - - - -