代码示例
<html>
<head>
<meta charset="utf-8">
<meta name='viewport' content='width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0'>
<title></title>
<script src='js/underscore.js'></script>
<!-- 引入百度地图 -->
<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=P4GOUWzDBOXMq8sBRabiMTFygL2ltEg7"></script>
<style>
html{height:100%}
body{height:100%;margin:0px;padding:0px}
#map{height:500px;width:700px;border: solid 1px black;}
</style>
</head>
<body>
<!-- 地图容器 -->
<div id="map"></div>
<button>点我加载地图</button>
<script>
document.querySelector('button').onclick=function()
{
// 位于BMap命名空间下的Map类表示地图，通过new操作符可以创建一个地图实例。其参数可以是元素id值也可以是元素对象。
var map = new BMap.Map("map");
//经纬度设置中心点
var point = new BMap.Point(116.404, 39.915);
//103.907379, 30.805303
//地图初始化，同时设置地图展示级别(1-21),15解决展示街道级别
map.centerAndZoom(point,15);
// map.addControl(new BMap.NavigationControl());
// map.addControl(new BMap.OverviewMapControl());
// map.addControl(new BMap.MapTypeControl());
//自定义系统控件的位置
//anchor:控件摆放位置
//offset:控件细节偏移位置
//type:控件加载部分
var options={
//表示摆放位置在右下角
anchor:BMAP_ANCHOR_BOTTOM_RIGHT,
//表示在右下角偏移细节(x,y)坐标
offset:new BMap.Size(150, 5),
//加载控件哪部分
type:BMAP_NAVIGATION_CONTROL_SMALL
}
// //加载系统控件,将定制信息作为参数传入创建的控件中
// map.addControl(new BMap.MapTypeControl(options))
// //自定义系统控件
// 自定义控件必须实现initialize方法，并且将控件的DOM元素返回
// 在本方法中创建个div元素作为控件的容器，并将其添加到地图容器中
//3.自定义控件
// 定义一个控件类，即function
function Fangda(){
// 设置默认停靠位置和偏移量
this.defaultAnchor = BMAP_ANCHOR_TOP_LEFT;
this.defaultOffset = new BMap.Size(10, 10);
}
// 通过JavaScript的prototype属性继承于BMap.Control
Fangda.prototype = new BMap.Control();
// 自定义控件必须实现initialize方法，并且将控件的DOM元素返回
// 在本方法中创建个div元素作为控件的容器，并将其添加到地图容器中
Fangda.prototype.initialize = function(map){
// 创建一个DOM元素
var div = document.createElement("div");
// 添加文字说明
div.appendChild(document.createTextNode("放大2级"));
// 设置样式
div.style.cursor = "pointer";
div.style.border = "1px solid gray";
div.style.backgroundColor = "white";
// 绑定事件，点击一次放大两级
div.onclick = function(e){
map.zoomTo(myMap.getZoom() + 2);
}
// 添加DOM元素到地图中
map.getContainer().appendChild(div);
// 将DOM元素返回
return div;
}
// 添加到地图当中
map.addControl(new Fangda());
}
</script>
</body>
</html>
