百度地图文档.docx

上传人:b****6 文档编号:7779596 上传时间:2023-01-26 格式:DOCX 页数:23 大小:23.43KB
下载 相关 举报
百度地图文档.docx_第1页
第1页 / 共23页
百度地图文档.docx_第2页
第2页 / 共23页
百度地图文档.docx_第3页
第3页 / 共23页
百度地图文档.docx_第4页
第4页 / 共23页
百度地图文档.docx_第5页
第5页 / 共23页
点击查看更多>>
下载资源
资源描述

百度地图文档.docx

《百度地图文档.docx》由会员分享,可在线阅读,更多相关《百度地图文档.docx(23页珍藏版)》请在冰豆网上搜索。

百度地图文档.docx

XX地图文档

XX地图研究摘要文档

一.创建地图实例

1.用城市名作为地图中心点的创建方式。

DOCTYPEhtml>

body,html,#allmap{width:

100%;height:

100%;overflow:

hidden;margin:

0;}

//XX地图API功能

varmap=newBMap.Map("allmap");//创建Map实例

map.centerAndZoom("合肥",15);//初始化地图,设置中心点坐标和地图级别。

2.

//XX地图API功能

varmap=newBMap.Map("allmap");//创建Map实例

map.centerAndZoom(newBMap.Point(116.4035,39.915),15);//初始化时,即可设置中心点和地图缩放级别。

setTimeout(function(){

map.setCenter("广州");//设置地图中心点。

center除了可以为坐标点以外,还支持城市名

map.setZoom(10);//将视图切换到指定的缩放等级,中心点坐标不变

},1500);

二.地图的拖拽和缩放功能

1.当地图创建成功之后,默认是可以拖拽的。

添加上如下语句就不支持拖拽。

map.disableDragging();//禁止拖拽

setTimeout(function(){

map.enableDragging();//三秒后开启拖拽

//map.enableInertialDragging();//三秒后开启惯性拖拽<基于拖拽开启的基础之上>

},3000);

地图可以实现鼠标滑动缩放。

map.enableScrollWheelZoom();//启用滚轮放大缩小,如果不添加本句话,不可缩放。

 

获取坐标中心方法:

alert("当前地图中心点:

"+map.getCenter().lng+","+map.getCenter().lat);

鼠标点击获取坐标:

map.addEventListener("click",function(e){//鼠标点击获取坐标

alert(e.point.lng+","+e.point.lat);

});

 

二.地图的相关控件

1.在地图的四个拐角放置4个缩放的控件菜单

map.addControl(newBMap.NavigationControl());//添加默认缩放平移控件

map.addControl(newBMap.NavigationControl({anchor:

BMAP_ANCHOR_TOP_RIGHT,type:

BMAP_NAVIGATION_CONTROL_SMALL}));//右上角,仅包含平移和缩放按钮

map.addControl(newBMap.NavigationControl({anchor:

BMAP_ANCHOR_BOTTOM_LEFT,type:

BMAP_NAVIGATION_CONTROL_PAN}));//左下角,仅包含平移按钮

map.addControl(newBMap.NavigationControl({anchor:

BMAP_ANCHOR_BOTTOM_RIGHT,type:

BMAP_NAVIGATION_CONTROL_ZOOM}));//右下角,仅包含缩放按钮

map.addControl(newBMap.OverviewMapControl());//添加默认缩略地图控件

map.addControl(newBMap.OverviewMapControl({isOpen:

true,anchor:

BMAP_ANCHOR_TOP_RIGHT}));//右上角,打开

2.添加比例尺控件

varmap=newBMap.Map("allmap");

map.centerAndZoom(newBMap.Point(116.404,39.915),11);

map.addControl(newBMap.ScaleControl());//添加默认比例尺控件

map.addControl(newBMap.ScaleControl({anchor:

BMAP_ANCHOR_TOP_LEFT}));//左上

map.addControl(newBMap.ScaleControl({anchor:

BMAP_ANCHOR_TOP_RIGHT}));//右上

map.addControl(newBMap.ScaleControl({anchor:

BMAP_ANCHOR_BOTTOM_LEFT}));//左下

map.addControl(newBMap.ScaleControl({anchor:

BMAP_ANCHOR_BOTTOM_RIGHT}));//右下

3.添加版权控制

//XX地图API功能

varmap=newBMap.Map("allmap");

map.centerAndZoom(newBMap.Point(116.404,39.915),11);

varcr=newBMap.CopyrightControl({anchor:

BMAP_ANCHOR_TOP_RIGHT});//设置版权控件位置

map.addControl(cr);//添加版权控件

varbs=map.getBounds();//返回地图可视区域

cr.addCopyright({id:

1,content:

"

20px;background:

yellow'>我是自定义版权控件呀",bounds:

bs});//Copyright(id,content,bounds)类作为CopyrightControl.addCopyright()方法的参数

4.添加标注点和弹出信息

//XX地图API功能

varmap=newBMap.Map("allmap");

map.centerAndZoom(newBMap.Point(116.404,39.915),14);

varmarker1=newBMap.Marker(newBMap.Point(116.384,39.925));//创建标注

map.addOverlay(marker1);//将标注添加到地图中

//创建信息窗口

varinfoWindow1=newBMap.InfoWindow("普通标注");

marker1.addEventListener("click",function(){this.openInfoWindow(infoWindow1);});

//创建小狐狸

varpt=newBMap.Point(116.417,39.909);

varmyIcon=newBMap.Icon("fox.gif",newBMap.Size(300,157));

varmarker2=newBMap.Marker(pt,{icon:

myIcon});//创建标注

map.addOverlay(marker2);//将标注添加到地图中

//让小狐狸说话(创建信息窗口)

varinfoWindow2=newBMap.InfoWindow("

14px;'>哈哈,你看见我啦!

我可不常出现哦!

14px;'>赶快查看源代码,看看我是如何添加上来的!

");

marker2.addEventListener("click",function(){this.openInfoWindow(infoWindow2);});

5.添加动态的标注

//XX地图API功能

varmap=newBMap.Map("allmap");

varpoint=newBMap.Point(116.404,39.915);

map.centerAndZoom(point,15);

varmarker=newBMap.Marker(point);//创建标注

map.addOverlay(marker);//将标注添加到地图中

marker.setAnimation(BMAP_ANIMATION_BOUNCE);//跳动的动画

5.随机添加标注点

//编写自定义函数,创建标注

functionaddMarker(point){

varmarker=newBMap.Marker(point);

map.addOverlay(marker);

}

//随机向地图添加25个标注

varbounds=map.getBounds();

varsw=bounds.getSouthWest();

varne=bounds.getNorthEast();

varlngSpan=Math.abs(sw.lng-ne.lng);

varlatSpan=Math.abs(ne.lat-sw.lat);

for(vari=0;i<25;i++){

varpoint=newBMap.Point(sw.lng+lngSpan*(Math.random()*0.7),ne.lat-latSpan*(Math.random()*0.7));

addMarker(point);

}

6.添加折线

arpolyline=newBMap.Polyline([

newBMap.Point(116.399,29.910),

newBMap.Point(116.405,39.920),

newBMap.Point(116.425,39.900)

],{strokeColor:

"blue",strokeWeight:

6,strokeOpacity:

0.5});

map.addOverlay(polyline);

7.添加多边形

//XX地图API功能

varmap=newBMap.Map("allmap");

varpoint=newBMap.Point(116.404,39.915);

map.centerAndZoom(point,11);

varpolygon=newBMap.Polygon([

newBMap.Point(116.256515,39.995242),

newBMap.Point(116.502579,39.951893),

newBMap.Point(116.534775,39.998338),

newBMap.Point(116.256515,39.866882)

],{strokeColor:

"blue",strokeWeight:

6,strokeOpacity:

0.5});

map.addOverlay(polygon);

8.添加圆形

//XX地图API功能

varmap=newBMap.Map("allmap");

varpoint=newBMap.Point(116.404,39.915);

map.centerAndZoom(point,16);

varcircle=newBMap.Circle(point,50);

map.addOverlay(circle);

9.添加矩形图

varpStart=newBMap.Point(116.236106,39.994579);

varpEnd=newBMap.Point(116.58508,39.857356);

varpolygon=newBMap.Polygon([

newBMap.Point(pStart.lng,pStart.lat),

newBMap.Point(pEnd.lng,pStart.lat),

newBMap.Point(pEnd.lng,pEnd.lat),

newBMap.Point(pStart.lng,pEnd.lat)

],{strokeColor:

"blue",strokeWeight:

6,strokeOpacity:

0.5});

map.addOverlay(polygon);

10.添加弧形(是否可以编辑)

//XX地图API功能

varmap=newBMap.Map("container");

map.centerAndZoom(newBMap.Point(118.454,32.955),6);

map.enableScrollWheelZoom();

varbeijingPosition=newBMap.Point(116.432045,39.910683),

hangzhouPosition=newBMap.Point(120.129721,30.314429),

taiwanPosition=newBMap.Point(121.491121,25.127053);

varpoints=[beijingPosition,hangzhouPosition,taiwanPosition];

varcurve=newBMapLib.CurveLine(points,{strokeColor:

"blue",strokeWeight:

3,strokeOpacity:

0.5});//创建弧线对象

map.addOverlay(curve);//添加到地图中

curve.enableEditing();//开启编辑功能

11.添加文本标注

//XX地图API功能

varmap=newBMap.Map("allmap");

varpoint=newBMap.Point(116.417854,39.921988);

map.centerAndZoom(point,15);

varopts={

position:

point,//指定文本标注所在的地理位置

offset:

newBMap.Size(30,-30)//设置文本偏移量

}

varlabel=newBMap.Label("欢迎使用XX地图,这是一个简单的文本标注哦~",opts);//创建文本标注对象

label.setStyle({

color:

"red",

fontSize:

"12px",

height:

"20px",

lineHeight:

"20px",

fontFamily:

"微软雅黑"

});

map.addOverlay(label);

12.在地图上标注热点信息

//XX地图API功能

varmap=newBMap.Map("allmap");

varpoint=newBMap.Point(116.404,39.915);//创建点坐标

map.centerAndZoom(point,15);//初始化地图,设置中心点坐标和地图级别。

//在天安门添加一个热区,鼠标放在地图天安门上,会出现提示文字

varhotSpot=newBMap.Hotspot(point,{text:

"我爱北京天安门!

",minZoom:

8,maxZoom:

18});

map.addHotspot(hotSpot);

//在王府井地铁处,再添加一个热区

varpoint2=newBMap.Point(116.41787,39.914391);

varhotSpot2=newBMap.Hotspot(point2,{text:

"王府井地铁"});

map.addHotspot(hotSpot2);

13.画出行政区范围

//XX地图API功能

varmap=newBMap.Map("allmap");

map.centerAndZoom(newBMap.Point(116.403765,39.914850),5);

map.enableScrollWheelZoom();

functiongetBoundary(){

varbdary=newBMap.Boundary();

bdary.get("重庆",function(rs){//获取行政区域

//map.clearOverlays();//清除地图覆盖物

varcount=rs.boundaries.length;//行政区域的点有多少个

for(vari=0;i

varply=newBMap.Polygon(rs.boundaries[i],{strokeWeight:

2,strokeColor:

"#ff0000"});//建立多边形覆盖物

map.addOverlay(ply);//添加覆盖物

map.setViewport(ply.getPath());//调整视野

}

});

}

setTimeout(function(){

getBoundary();

},2000);//两秒后出现重庆行政区的轮廓

14.自定义覆盖物出现在地图之上

mp.enableScrollWheelZoom();

//复杂的自定义覆盖物

functionComplexCustomOverlay(point,text,mouseoverText){

this._point=point;

this._text=text;

this._overText=mouseoverText;

}

ComplexCustomOverlay.prototype=newBMap.Overlay();

ComplexCustomOverlay.prototype.initialize=function(map){

this._map=map;

vardiv=this._div=document.createElement("div");

div.style.position="absolute";

div.style.zIndex=BMap.Overlay.getZIndex(this._point.lat);

div.style.backgroundColor="#EE5D5B";

div.style.border="1pxsolid#BC3B3A";

div.style.color="white";

div.style.height="18px";

div.style.padding="2px";

div.style.lineHeight="18px";

div.style.whiteSpace="nowrap";

div.style.MozUserSelect="none";

div.style.fontSize="12px"

varspan=this._span=document.createElement("span");

div.appendChild(span);

span.appendChild(document.createTextNode(this._text));

varthat=this;

vararrow=this._arrow=document.createElement("div");

arrow.style.background="url(no-repeat";

arrow.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.getElementsByTagName("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="0px0px";

}

mp.getPanes().labelPane.appendChild(div);

returndiv;

}

ComplexCustomOverlay.prototype.draw=function(){

varmap=this._map;

varpixel=map.pointToOverlayPi

展开阅读全文
相关资源
猜你喜欢
相关搜索

当前位置:首页 > 党团工作 > 入党转正申请

copyright@ 2008-2022 冰豆网网站版权所有

经营许可证编号:鄂ICP备2022015515号-1