百度地图API的第一次接触——自定义控件
1.定义一个控件类,即function
function ZoomControl(){
// 设置默认停靠位置和偏移量
this.defaultAnchor = BMAP_ANCHOR_TOP_LEFT;
this.defaultOffset = new BMap.Size(10, 10);
}
2.通过JavaScript的prototype属性继承于BMap.Control
ZoomControl.prototype = new BMap.Control();
3.自定义控件必须实现自己的initialize方法,并且将控件的DOM元素返回
ZoomControl.prototype.initialize = function(map){
var b1 = document.createElement("input");
b1.type = "button";
b1.value="放大1级";
b1.onclick = function(e){
map.zoomTo(map.getZoom() + 1);
}
var b2 = document.createElement("input");
b2.type = "button";
b2.value="缩小1级";
b2.onclick = function(e){
map.zoomTo(map.getZoom() - 1);
}
var div = document.createElement("div");
div.appendChild(b1);
div.appendChild(b2);
map.getContainer().appendChild(div);
return div;
}
4.创建控件, 添加到地图当中
var myZoomCtrl = new ZoomControl(); map.addControl(myZoomCtrl);
5.打开浏览器

百度地图API的第一次接触——自定义控件的更多相关文章
- 百度地图API的第一次接触
因为项目的需求,第一次接触了百度API. 第一步:引用百度地图API的脚本 如果在局域网环境中,要把地图文件和js文件都要下载下来 <script type="text/javascr ...
- 百度地图API的第一次接触——地图事件
0.初始化地图 var map = new BMap.Map("container"); var point = new BMap.Point(116.404, 39.915); ...
- 百度地图API的第一次接触——标注和信息窗的使用
1.定义js函数,用于在指定位置添加标注,在标注位置添加并打开信息窗口 function addMarker(point, index){ // 创建图标对象 var myIcon = new BMa ...
- 百度地图API的第一次接触——热区
1.代码很简单 var map = new BMap.Map("container"); var point = new BMap.Point(116.404, 39.915); ...
- 百度地图API的第一次接触——右键菜单
1.初始化地图 var map = new BMap.Map("container"); var point = new BMap.Point(116.404, 39.915); ...
- 百度地图API示例之添加自定义控件
代码 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" cont ...
- 百度地图api添加自定义控件
官网栗子:http://lbsyun.baidu.com/jsdemo.htm#b0_6 <!DOCTYPE html><html><head> <meta ...
- 百度地图api简单使用方法
百度地图API的使用方法 百度地图API 开始学习百度地图API最简单的方式是看一个简单的示例.以下代码创建了一个520x340大小的地图区域并以天安门作为地图的中心: 1. <html&g ...
- 百度地图API的使用方法
百度地图API 开始学习百度地图API最简单的方式是看一个简单的示例.以下代码创建了一个520x340大小的地图区域并以天安门作为地图的中心: 1. <html> 2. <head& ...
随机推荐
- wifi认证Portal开发系列(三):portal协议
中国移动WLAN业务PORTAL协议规范介绍 一.用户上线认证流程 上线流程完成用户账号的认证,并把认证结果通知Portal Server,Portal server将会通知WLAN用户并且显示相应的 ...
- items" does not support runtime expression
<%@taglib prefix="c" uri="http://java.sun.com/jstl/core"%> 更改为 <%@tagl ...
- linux SPI驱动——spi协议(一)
一:SPI简介以及应用 SPI, Serial Perripheral Interface, 串行外围设备接口, 是 Motorola 公司推出的一种同步串行接口技术. SPI 总线在物理上是通过接在 ...
- Portal实现原理
https://blog.csdn.net/sukyle/article/details/6456930
- win本地配置docker环境
先上官网链接:https://docs.docker.com/get-started/part2/#introduction 优质入门教程:http://www.docker.org.cn/book/ ...
- Drcom账户管理Server端解说
https://www.github.com/xiyouMc 首先今天要讲的是针对Drcom查询账户URL的解析和抓取数据. Drcom是大学生宿舍上网普遍使用的联网client,然而对于自己账 ...
- 微信小程序设置控件权重
项目中最常用的两种布局方式,水平布局和垂直布局,在微信小程序中实现起来也比较简单. 1.横向水平布局: 实现水平布局,需要四个view容器组件,其中一个是父容器.如下: & ...
- UFLDL教程
http://ufldl.stanford.edu/wiki/index.php/UFLDL%E6%95%99%E7%A8%8B
- EasyPlayer Android RTSP播放器延迟再优化策略
EasyPlayer延迟再优化策略 EasyPlayer是一款专门针对RTSP协议进行过优化的播放器.其中两个我们引以为傲的的优点就是起播快和低延迟.最近我们遇到一些需求,其对延迟要求非常苛刻,于是我 ...
- 实现RTSP网站微信直播方案EasyNVR(linux版)部署问题之:ERR_CONTENT_LENGTH_MISMATCH
发现问题: 想要优化一下EasyNVR相关功能,内部测试软件,于是在linux系统中部署了一台EasyNVR.当部署好,运行起来发现问题: EasyNVR的配置页面数据出不来. 分析问题: 基于是we ...