您的位置：首页 > 其它

百度地图自定义放大缩小按钮

2013-08-08 20:20 351 查看

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>百度地图Demo02</title>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.5&ak=9f3caf0f96e461b6e78d6d5bf6c7a425"></script>
<style type="text/css">
html{height:100%}
body{height:100%;margin:0px;padding:0px}
#BaiduMap{ height:600px; width:400px;}
</style>
</head>
<body>
<div>
<h2>百度地图</h2>
</div>
<div id="BaiduMap">
</div>
<script type="text/javascript">
var map = new BMap.Map("BaiduMap");          // 创建地图实例
var point = new BMap.Point(116.404, 39.915);  // 创建点坐标
map.centerAndZoom(point, 15);                 // 初始化地图，设置中心点坐标和地图级别

// 定义一个控件类，即function
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) {
//创建一个DIV
var mydiv = document.createElement("div");
//创建一个放大用的img
var img_plus = document.createElement("img");
//设置img的src属性
img_plus.setAttribute("src", "./images/plus_2.png");
//为img设置点击事件
img_plus.onclick = function () {
map.zoomTo(map.getZoom() + 1);
}
//创建一个缩小用的img
var img_minus = document.createElement("img");
img_minus.setAttribute("src", "./images/minus_2.png");
img_minus.onclick = function () {
map.zoomTo(map.getZoom() - 1);
}
//添加放大的img图标到div中
mydiv.appendChild(img_plus);
//加一个换行符，使2个图标上下排列
mydiv.appendChild(document.createElement("br"));
//添加缩小的img图标到div中
mydiv.appendChild(img_minus);
//添加DOM元素到地图中
map.getContainer().appendChild(mydiv);
//将DOM元素返回；
return mydiv;
}

// 创建控件实例
var myZoomCtrl = new ZoomControl();
// 添加到地图当中
map.addControl(myZoomCtrl);
</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航