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的第一次接触——自定义控件的更多相关文章

  1. 百度地图API的第一次接触

    因为项目的需求,第一次接触了百度API. 第一步:引用百度地图API的脚本 如果在局域网环境中,要把地图文件和js文件都要下载下来 <script type="text/javascr ...

  2. 百度地图API的第一次接触——地图事件

    0.初始化地图 var map = new BMap.Map("container"); var point = new BMap.Point(116.404, 39.915); ...

  3. 百度地图API的第一次接触——标注和信息窗的使用

    1.定义js函数,用于在指定位置添加标注,在标注位置添加并打开信息窗口 function addMarker(point, index){ // 创建图标对象 var myIcon = new BMa ...

  4. 百度地图API的第一次接触——热区

    1.代码很简单 var map = new BMap.Map("container"); var point = new BMap.Point(116.404, 39.915); ...

  5. 百度地图API的第一次接触——右键菜单

    1.初始化地图 var map = new BMap.Map("container"); var point = new BMap.Point(116.404, 39.915); ...

  6. 百度地图API示例之添加自定义控件

    代码 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" cont ...

  7. 百度地图api添加自定义控件

    官网栗子:http://lbsyun.baidu.com/jsdemo.htm#b0_6 <!DOCTYPE html><html><head> <meta ...

  8. 百度地图api简单使用方法

    百度地图API的使用方法   百度地图API 开始学习百度地图API最简单的方式是看一个简单的示例.以下代码创建了一个520x340大小的地图区域并以天安门作为地图的中心: 1. <html&g ...

  9. 百度地图API的使用方法

    百度地图API 开始学习百度地图API最简单的方式是看一个简单的示例.以下代码创建了一个520x340大小的地图区域并以天安门作为地图的中心: 1. <html> 2. <head& ...

随机推荐

  1. LightOJ 1068 Investigation (数位dp)

    problem=1068">http://www.lightoj.com/volume_showproblem.php?problem=1068 求出区间[A,B]内能被K整除且各位数 ...

  2. iptables简易使用教程

    iptables是linux里比较常用的防火墙,也是centos7.0之前的版本默认自带的防火墙. 配置防火墙需特别注意一件事情:如果服务器在异地机房,需要谨慎配置端口,以免造成新配置生效后无法远程登 ...

  3. CocoaPods Podfile详解与使用

    1.为什么需要CocoaPods 在进行iOS开发的时候,总免不了使用第三方的开源库,比如SBJson.AFNetworking.Reachability等等.使用这些库的时候通常需要: 下载开源库的 ...

  4. ios和mac开发 学习资料

    1.WWDC14 Session 409 学习笔记: http://url.cn/Ju2Yt5 2..WWDC14 Session 4092学习笔记: http://url.cn/Rx0mAN 3.i ...

  5. AOS应用基础平台-模块开发流程

    AOS平台简单介绍 AOS应用基础平台基于JavaEE技术体系,以"标准功能可复用.通用模块可配置.行业需求高速开发.异构系统无缝集成"为目标.为软件开发团队提供高效可控.随需应变 ...

  6. C# WinForm退出方法

    1.this.Close();   只是关闭当前窗口,若不是主窗体的话,是无法退出程序的,另外若有托管线程(非主线程),也无法干净地退出: 2.Application.Exit();  强制所有消息中 ...

  7. rtsp转rtmp、hls网页直播服务器EasyNVR前端兼容性调试:ie下的 pointer-events- none

    发现问题: 之前在做EasyNVR 的web页面开发过程中,力求的都是一个播放效果的.功能的展示.对于兼容性也有注意,但有些细节还是难免有所疏忽. 内部测试发现:由于我们是流媒体的实时视频直播,在we ...

  8. 注册HttpHandler

    How to: Register HTTP Handlers After you have created a custom HTTP handler class, you must register ...

  9. client网络优化方法

    减小图片大小(使用WebP格式的图片)  大部分的Facebook应用数据都是图片,因此降低图片的大小就能够较少数据的下载量.从而加快下载速度,这一点在高延迟的网络环境下很重要.Facebook返回给 ...

  10. Java for LeetCode 117 Populating Next Right Pointers in Each Node II

    Follow up for problem "Populating Next Right Pointers in Each Node". What if the given tre ...