心得笔记网站首页 心得笔记

百度地图javascript接口开发-地图控件

发布时间：2016-11-20 14:22:23编辑：雪饮阅读（）

地图控件添加示例:

<!doctype html>

<html>

<head>

<title>百度地图使用示例</title>

html{

height:100%;

}

body{

height:100%;margin:0px;padding:0px;

}

#container{width:100%;height:1500px;}

</style>

var map;

function InitMap(){

map=new BMap.Map("container");

var point=new BMap.Point(109.01,32.42);//用经纬度生成一个点,第一个参数为经度，第二个为纬度

map.centerAndZoom(point,15);//15为地图以point为中心的放大级别，数字越大放大倍数就越大

map.enableScrollWheelZoom();//开启鼠标滚动对地图进行缩放

//添加默认缩放平移控件

var opts={type:BMAP_NAVIGATION_CONTROL_ZOOM,anchor:BMAP_ANCHOR_TOP_RIGHT,offset:new BMap.Size(50,100)};

//缩放平移控件可选参数，键“type" 值为“BMAP_NAVIGATION_CONTROL_ZOOM”表示只显示控件的缩放部分功能。

//更多减值值参见api接口文档的控件篇

map.addControl(new BMap.NavigationControl(opts));

//添加比例尺控件，opts为可选

map.addControl(new BMap.ScaleControl(opts));

//添加地图类型控件

opts={type:BMAP_MAPTYPE_CONTROL_DROPDOWN};

map.addControl(new BMap.MapTypeControl());

//添加版权控件

var cr=new BMap.CopyrightControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT,offset:new BMap.Size(100,100)});

map.addControl(cr);

var bs=map.getBounds();//返回可视区域

cr.addCopyright({id:1,content:"<a href='http://www.gaojiupan.cn'><h1>雪饮</h1></a>",bounds:bs});

//添加缩略图控件

opts={anchor:BMAP_ANCHOR_TOP_LEFT,offset:new BMap.Size(100,100)}

map.addControl(new BMap.OverviewMapControl(opts));

//添加定位控件

opts={anchor:BMAP_ANCHOR_BOTTOM_LEFT,offset:new BMap.Size(100,100),showAddressBar:false}

map.addControl(new BMap.GeolocationControl(opts));

//添加全景控件

map.addControl(new BMap.PanoramaControl());

//声明自定义控件以及自定义控件的添加

function ZoomControl(){

//设置默认停靠位置和偏移量

this.defaultAnchor=BMAP_ANCHOR_TOP_LEFT;

this.defaultOffset=new BMap.Size(10,10);

}

//通过javascript的prototype属性继承BMap.Control

ZoomControl.prototype=new BMap.Control();

//自定义控件必须实现initialize方法，并且将控件的DOM元素返回

//在本方法中创建一个div元素作为控件的容器，并将其添加到地图的容器中

ZoomControl.prototype.initialize=function(map){

//创建一个dom元素

var div=document.createElement("div");

//添加文字说明

div.appendChild(document.createTextNode("放大一级"));

//设置样式

div.style.cursor="pointer";

div.style.border="1px solid pink";

div.style.backgroundColor="white";

//绑定事件，点击一次放大两级

div.onclick=function(e){

map.zoomTo(map.getZoom()+1);

}

//添加dom元素到地图中

map.getContainer().appendChild(div);

//将dom元素返回

return div;

}

map.addControl(new ZoomControl());

}

</script>

</head>

</body>

</html>

关键字词：百度地图api,javascript

上一篇：百度地图javascript接口开发-百度地图使用入门

下一篇：百度地图javascript接口开发-覆盖物

您当前的位置： 首页 > 学无止境 > 心得笔记 网站首页心得笔记

百度地图javascript接口开发-地图控件

相关文章

您当前的位置：首页 > 学无止境 > 心得笔记网站首页心得笔记