百度地图文档文档格式.docx
- 文档编号:20906813
- 上传时间:2023-01-26
- 格式:DOCX
- 页数:23
- 大小:23.43KB
百度地图文档文档格式.docx
《百度地图文档文档格式.docx》由会员分享,可在线阅读,更多相关《百度地图文档文档格式.docx(23页珍藏版)》请在冰豆网上搜索。
divid="
allmap"
/div>
/body>
/html>
//XX地图API功能
varmap=newBMap.Map("
);
//创建Map实例
map.centerAndZoom("
合肥"
15);
//初始化地图,设置中心点坐标和地图级别。
/script>
2.
map.centerAndZoom(newBMap.Point(116.4035,39.915),15);
//初始化时,即可设置中心点和地图缩放级别。
setTimeout(function(){
map.setCenter("
广州"
//设置地图中心点。
center除了可以为坐标点以外,还支持城市名
map.setZoom(10);
//将视图切换到指定的缩放等级,中心点坐标不变
},1500);
二.地图的拖拽和缩放功能
1.当地图创建成功之后,默认是可以拖拽的。
添加上如下语句就不支持拖拽。
map.disableDragging();
//禁止拖拽
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}));
//右上角,仅包含平移和缩放按钮
BMAP_ANCHOR_BOTTOM_LEFT,type:
BMAP_NAVIGATION_CONTROL_PAN}));
//左下角,仅包含平移按钮
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.添加比例尺控件
map.centerAndZoom(newBMap.Point(116.404,39.915),11);
map.addControl(newBMap.ScaleControl());
//添加默认比例尺控件
map.addControl(newBMap.ScaleControl({anchor:
BMAP_ANCHOR_TOP_LEFT}));
//左上
//右上
BMAP_ANCHOR_BOTTOM_LEFT}));
//左下
BMAP_ANCHOR_BOTTOM_RIGHT}));
//右下
3.添加版权控制
varcr=newBMap.CopyrightControl({anchor:
BMAP_ANCHOR_TOP_RIGHT});
//设置版权控件位置
map.addControl(cr);
//添加版权控件
varbs=map.getBounds();
//返回地图可视区域
cr.addCopyright({id:
1,content:
"
ahref='
#'
style='
font-size:
20px;
background:
yellow'
我是自定义版权控件呀<
/a>
bounds:
bs});
//Copyright(id,content,bounds)类作为CopyrightControl.addCopyright()方法的参数
4.添加标注点和弹出信息
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("
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("
pstyle='
14px;
'
哈哈,你看见我啦!
我可不常出现哦!
/p>
赶快查看源代码,看看我是如何添加上来的!
marker2.addEventListener("
function(){this.openInfoWindow(infoWindow2);
5.添加动态的标注
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.添加多边形
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)
map.addOverlay(polygon);
8.添加圆形
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);
newBMap.Point(pStart.lng,pStart.lat),
newBMap.Point(pEnd.lng,pStart.lat),
newBMap.Point(pEnd.lng,pEnd.lat),
newBMap.Point(pStart.lng,pEnd.lat)
10.添加弧形(是否可以编辑)
container"
map.centerAndZoom(newBMap.Point(118.454,32.955),6);
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:
3,strokeOpacity:
//创建弧线对象
map.addOverlay(curve);
//添加到地图中
curve.enableEditing();
//开启编辑功能
11.添加文本标注
varpoint=newBMap.Point(116.417854,39.921988);
varopts={
position:
point,//指定文本标注所在的地理位置
offset:
newBMap.Size(30,-30)//设置文本偏移量
varlabel=newBMap.Label("
欢迎使用XX地图,这是一个简单的文本标注哦~"
opts);
//创建文本标注对象
label.setStyle({
color:
red"
fontSize:
12px"
height:
20px"
lineHeight:
fontFamily:
微软雅黑"
});
map.addOverlay(label);
12.在地图上标注热点信息
//创建点坐标
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.画出行政区范围
map.centerAndZoom(newBMap.Point(116.403765,39.914850),5);
functiongetBoundary(){
varbdary=newBMap.Boundary();
bdary.get("
重庆"
function(rs){//获取行政区域
//map.clearOverlays();
//清除地图覆盖物
varcount=rs.boundaries.length;
//行政区域的点有多少个
for(vari=0;
count;
i++){
varply=newBMap.Polygon(rs.boundaries[i],{strokeWeight:
2,strokeColor:
#ff0000"
//建立多边形覆盖物
map.addOverlay(ply);
//添加覆盖物
map.setViewport(ply.getPath());
//调整视野
}
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="
div.style.whiteSpace="
nowrap"
div.style.MozUserSelect="
none"
div.style.fontSize="
varspan=this._span=document.createElement("
span"
div.appendChild(span);
span.appendChild(document.createTextNode(this._text));
varthat=this;
vararrow=this._arrow=document.createElement("
arrow.style.background="
url(no-repeat"
arrow.style.position="
arrow.style.width="
11px"
arrow.style.height="
10px"
arrow.style.top="
22px"
arrow.style.left="
arrow.style.overflow="
hidden"
div.appendChild(arrow);
div.onmouseover=function(){
this.style.backgroundColor="
#6BADCA"
this.style.borderColor="
#0000ff"
this.getElementsByTagName("
)[0].innerHTML=that._overText;
arrow.style.backgroundPosition="
0px-20px"
div.onmouseout=function(){
#BC3B3A"
)[0].innerHTML=that._text;
0px0px"
mp.getPanes().labelPane.appendChild(div);
returndiv;
ComplexCustomOverlay.prototype.draw=function(){
varmap=this._map;
varpixel=map.pointToOverlayPi
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 百度 地图 文档