html地图模块,百度地图自定义控件模板.html

body, html {

width: 100%;

height: 100%;

margin: 0;

font-family: "微软雅黑";

}

#allmap {

width: 100%;

height: 500px;

}

p {

margin-left: 5px;

font-size: 14px;

}

添加自定义控件

在地图左上角添加"放大2级"自定义控件，双击放大地图2级

// 百度地图API功能

var map = new BMap.Map("allmap");

map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);

// 定义一个控件类,即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) {

// 创建一个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.setZoom(map.getZoom() + 2);

}

// 添加DOM元素到地图中

map.getContainer().appendChild(div);

// 将DOM元素返回

return div;

}

// 创建控件

var myZoomCtrl = new ZoomControl();

// 添加到地图当中

map.addControl(myZoomCtrl);

一键复制

编辑

Web IDE

原始数据

按行查看

历史