1、XX地图文档XX地图研究摘要文档一 创建地图实例1. 用城市名作为地图中心点的创建方式。body, html,#allmap width: 100%;height: 100%;overflow: hidden;margin:0;script type=text/javascript src=用城市名设置地图中心点/ XX地图API功能var map = new BMap.Map(allmap); / 创建Map实例map.centerAndZoom(合肥,15); / 初始化地图,设置中心点坐标和地图级别。2./ XX地图API功能var map = new BMap.Map(allmap);
2、 / 创建Map实例map.centerAndZoom(new BMap.Point(116.4035,39.915),15); /初始化时,即可设置中心点和地图缩放级别。setTimeout(function() map.setCenter(广州); /设置地图中心点。center除了可以为坐标点以外,还支持城市名 map.setZoom(10); /将视图切换到指定的缩放等级,中心点坐标不变 , 1500);二地图的拖拽和缩放功能1.当地图创建成功之后,默认是可以拖拽的。添加上如下语句就不支持拖拽。map.disableDragging(); /禁止拖拽 setTimeout(functi
3、on() map.enableDragging(); /三秒后开启拖拽 /map.enableInertialDragging(); /三秒后开启惯性拖拽, 3000);地图可以实现鼠标滑动缩放。map.enableScrollWheelZoom(); /启用滚轮放大缩小,如果不添加本句话,不可缩放。获取坐标中心方法:alert(当前地图中心点: + map.getCenter().lng + , + map.getCenter().lat);鼠标点击获取坐标:map.addEventListener(click,function(e)/鼠标点击获取坐标 alert(e.point.lng +
4、 , + e.point.lat););二 地图的相关控件1. 在地图的四个拐角放置4个缩放的控件菜单map.addControl(new BMap.NavigationControl(); /添加默认缩放平移控件map.addControl(new BMap.NavigationControl(anchor: BMAP_ANCHOR_TOP_RIGHT, type: BMAP_NAVIGATION_CONTROL_SMALL); /右上角,仅包含平移和缩放按钮map.addControl(new BMap.NavigationControl(anchor: BMAP_ANCHOR_BOTTO
5、M_LEFT, type: BMAP_NAVIGATION_CONTROL_PAN); /左下角,仅包含平移按钮map.addControl(new BMap.NavigationControl(anchor: BMAP_ANCHOR_BOTTOM_RIGHT, type: BMAP_NAVIGATION_CONTROL_ZOOM); /右下角,仅包含缩放按钮map.addControl(new BMap.OverviewMapControl(); /添加默认缩略地图控件map.addControl(new BMap.OverviewMapControl(isOpen:true, anchor
6、: BMAP_ANCHOR_TOP_RIGHT); /右上角,打开2. 添加比例尺控件var map = new BMap.Map(allmap);map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);map.addControl(new BMap.ScaleControl(); / 添加默认比例尺控件map.addControl(new BMap.ScaleControl(anchor: BMAP_ANCHOR_TOP_LEFT); / 左上map.addControl(new BMap.ScaleControl(anchor: BMA
7、P_ANCHOR_TOP_RIGHT); / 右上map.addControl(new BMap.ScaleControl(anchor: BMAP_ANCHOR_BOTTOM_LEFT); / 左下map.addControl(new BMap.ScaleControl(anchor: BMAP_ANCHOR_BOTTOM_RIGHT); / 右下3. 添加版权控制/ XX地图API功能var map = new BMap.Map(allmap);map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);var cr = new BMap.
8、CopyrightControl(anchor: BMAP_ANCHOR_TOP_RIGHT); /设置版权控件位置map.addControl(cr); /添加版权控件var bs = map.getBounds(); /返回地图可视区域cr.addCopyright(id: 1, content: 我是自定义版权控件呀, bounds: bs); /Copyright(id,content,bounds)类作为CopyrightControl.addCopyright()方法的参数4. 添加标注点和弹出信息/ XX地图API功能var map = new BMap.Map(allmap);
9、map.centerAndZoom(new BMap.Point(116.404, 39.915), 14);var marker1 = new BMap.Marker(new BMap.Point(116.384, 39.925); / 创建标注map.addOverlay(marker1); / 将标注添加到地图中/创建信息窗口var infoWindow1 = new BMap.InfoWindow(普通标注);marker1.addEventListener(click, function()this.openInfoWindow(infoWindow1););/创建小狐狸var pt
10、 = new BMap.Point(116.417, 39.909);var myIcon = new BMap.Icon(fox.gif, new BMap.Size(300,157);var marker2 = new BMap.Marker(pt,icon:myIcon); / 创建标注map.addOverlay(marker2); / 将标注添加到地图中/让小狐狸说话(创建信息窗口)var infoWindow2 = new BMap.InfoWindow(哈哈,你看见我啦!我可不常出现哦!赶快查看源代码,看看我是如何添加上来的!);marker2.addEventListener(
11、click, function()this.openInfoWindow(infoWindow2););5.添加动态的标注/ XX地图API功能var map = new BMap.Map(allmap);var point = new BMap.Point(116.404, 39.915);map.centerAndZoom(point, 15);var marker = new BMap.Marker(point); / 创建标注map.addOverlay(marker); / 将标注添加到地图中marker.setAnimation(BMAP_ANIMATION_BOUNCE); /跳
12、动的动画5. 随机添加标注点/ 编写自定义函数,创建标注function addMarker(point) var marker = new BMap.Marker(point); map.addOverlay(marker);/ 随机向地图添加25个标注var bounds = map.getBounds();var sw = bounds.getSouthWest();var ne = bounds.getNorthEast();var lngSpan = Math.abs(sw.lng - ne.lng);var latSpan = Math.abs(ne.lat - sw.lat);f
13、or (var i = 0; i 25; i +) var point = new BMap.Point(sw.lng + lngSpan * (Math.random() * 0.7), ne.lat - latSpan * (Math.random() * 0.7); addMarker(point);6. 添加折线ar polyline = new BMap.Polyline( new BMap.Point(116.399, 29.910), new BMap.Point(116.405, 39.920), new BMap.Point(116.425, 39.900), strokeC
14、olor:blue, strokeWeight:6, strokeOpacity:0.5);map.addOverlay(polyline);7. 添加多边形/ XX地图API功能var map = new BMap.Map(allmap);var point = new BMap.Point(116.404, 39.915);map.centerAndZoom(point, 11);var polygon = new BMap.Polygon( new BMap.Point(116.256515,39.995242), new BMap.Point(116.502579,39.951893)
15、, new BMap.Point(116.534775,39.998338), new BMap.Point(116.256515,39.866882), strokeColor:blue, strokeWeight:6, strokeOpacity:0.5);map.addOverlay(polygon);8. 添加圆形/ XX地图API功能var map = new BMap.Map(allmap);var point = new BMap.Point(116.404, 39.915);map.centerAndZoom(point, 16);var circle = new BMap.C
16、ircle(point,50);map.addOverlay(circle);9. 添加矩形图var pStart = new BMap.Point(116.236106,39.994579);var pEnd = new BMap.Point(116.58508,39.857356);var polygon = new BMap.Polygon( new BMap.Point(pStart.lng,pStart.lat), new BMap.Point(pEnd.lng,pStart.lat), new BMap.Point(pEnd.lng,pEnd.lat), new BMap.Poin
17、t(pStart.lng,pEnd.lat), strokeColor:blue, strokeWeight:6, strokeOpacity:0.5);map.addOverlay(polygon);10. 添加弧形(是否可以编辑)/ XX地图API功能var map = new BMap.Map(container);map.centerAndZoom(new BMap.Point(118.454, 32.955), 6);map.enableScrollWheelZoom();var beijingPosition=new BMap.Point(116.432045,39.910683)
18、, hangzhouPosition=new BMap.Point(120.129721,30.314429), taiwanPosition=new BMap.Point(121.491121,25.127053);var points = beijingPosition,hangzhouPosition, taiwanPosition;var curve = new BMapLib.CurveLine(points, strokeColor:blue, strokeWeight:3, strokeOpacity:0.5); /创建弧线对象map.addOverlay(curve); /添加
19、到地图中curve.enableEditing(); /开启编辑功能11. 添加文本标注/ XX地图API功能var map = new BMap.Map(allmap);var point = new BMap.Point(116.417854,39.921988);map.centerAndZoom(point, 15);var opts = position : point, / 指定文本标注所在的地理位置 offset : new BMap.Size(30, -30) /设置文本偏移量 var label = new BMap.Label(欢迎使用XX地图,这是一个简单的文本标注哦,
20、opts); / 创建文本标注对象 label.setStyle( color : red, fontSize : 12px, height : 20px, lineHeight : 20px, fontFamily:微软雅黑 );map.addOverlay(label);12. 在地图上标注热点信息/ XX地图API功能var map = new BMap.Map(allmap);var point = new BMap.Point(116.404, 39.915); / 创建点坐标map.centerAndZoom(point,15); / 初始化地图,设置中心点坐标和地图级别。/在天安
21、门添加一个热区,鼠标放在地图天安门上,会出现提示文字var hotSpot = new BMap.Hotspot(point, text: 我爱北京天安门!, minZoom: 8, maxZoom: 18);map.addHotspot(hotSpot);/在王府井地铁处,再添加一个热区var point2 = new BMap.Point(116.41787,39.914391);var hotSpot2 = new BMap.Hotspot(point2, text: 王府井地铁);map.addHotspot(hotSpot2);13. 画出行政区范围/ XX地图API功能var ma
22、p = new BMap.Map(allmap);map.centerAndZoom(new BMap.Point(116.403765, 39.914850), 5);map.enableScrollWheelZoom();function getBoundary() var bdary = new BMap.Boundary(); bdary.get(重庆, function(rs) /获取行政区域 /map.clearOverlays(); /清除地图覆盖物 var count = rs.boundaries.length; /行政区域的点有多少个 for(var i = 0; i co
23、unt; i+) var ply = new BMap.Polygon(rs.boundariesi, strokeWeight: 2, strokeColor: #ff0000); /建立多边形覆盖物 map.addOverlay(ply); /添加覆盖物 map.setViewport(ply.getPath(); /调整视野 ); setTimeout(function() getBoundary();, 2000);/两秒后出现重庆行政区的轮廓14. 自定义覆盖物出现在地图之上mp.enableScrollWheelZoom();/ 复杂的自定义覆盖物 function Complex
24、CustomOverlay(point, text, mouseoverText) this._point = point; this._text = text; this._overText = mouseoverText; ComplexCustomOverlay.prototype = new BMap.Overlay(); ComplexCustomOverlay.prototype.initialize = function(map) this._map = map; var div = this._div = document.createElement(div); div.sty
25、le.position = absolute; div.style.zIndex = BMap.Overlay.getZIndex(this._point.lat); div.style.backgroundColor = #EE5D5B; div.style.border = 1px solid #BC3B3A; div.style.color = white; div.style.height = 18px; div.style.padding = 2px; div.style.lineHeight = 18px; div.style.whiteSpace = nowrap; div.st
26、yle.MozUserSelect = none; div.style.fontSize = 12px var span = this._span = document.createElement(span); div.appendChild(span); span.appendChild(document.createTextNode(this._text); var that = this; var arrow = this._arrow = document.createElement(div); arrow.style.background = url( no-repeat; arro
27、w.style.position = absolute; arrow.style.width = 11px; arrow.style.height = 10px; arrow.style.top = 22px; arrow.style.left = 10px; arrow.style.overflow = hidden; div.appendChild(arrow); div.onmouseover = function() this.style.backgroundColor = #6BADCA; this.style.borderColor = #0000ff; this.getEleme
28、ntsByTagName(span)0.innerHTML = that._overText; arrow.style.backgroundPosition = 0px -20px; div.onmouseout = function() this.style.backgroundColor = #EE5D5B; this.style.borderColor = #BC3B3A; this.getElementsByTagName(span)0.innerHTML = that._text; arrow.style.backgroundPosition = 0px 0px; mp.getPanes().labelPane.appendChild(div); return div; ComplexCustomOverlay.prototype.draw = function() var map = this._map; var pixel = map.pointToOverlayPi
copyright@ 2008-2022 冰豆网网站版权所有
经营许可证编号:鄂ICP备2022015515号-1