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. eclipse-jee版配置tomcat

    Eclipse作为一款优秀的java开发开源IDE,集成了许多优秀的开发控件.下来我就如何安装eclipse及插件进行说明: 一.JDK安装   JDK是作为整个java的核心,包括运行环境,编译工具 ...

  2. zookeeper参数的详解

    安装和配置详解 本文介绍的 Zookeeper 是以 3.2.2 这个稳定版本为基础,最新的版本可以通过官网 http://hadoop.apache.org/zookeeper/来获取,Zookee ...

  3. 五分钟了解 Service Mesh

      1 背景   1.1 多语言   微服务理念是提倡不同业务使用最适合它的语言开发,现实情况也确实如此,尤其是AI的兴起,一般大型互联网公司存在 C/C++.Java.Golang.PHP.Pyth ...

  4. 【转】Android7.0版本以上的手机Eclipse无法打出LogCat

    本来想用Eclipse连下手机看下log的,结果LogCat没打出来任何信息,起初怀疑是我的DDMS有问题,结果连了下我老大的手机,完美打出log,看了下Android系统,老大的是6.0的,我的7. ...

  5. Unity3D研究院之Inspector视图中的get/set使用

    get set 使用起来很方便,但是编辑时在Inspector视图中问题就来了,因为get/set的属性即使是public了,但是在Inspector视图中依然不显示..谷歌一下估计就是下面这样的答案 ...

  6. Linux 开启端口,操作防火墙

    命令行方式:    添加10002端口方法 1.vi etc/sysconfig/iptables 2. 开放端口命令:-A INPUT -p tcp -m state --state NEW -m ...

  7. LA 3882 And Then There Was One[约瑟夫问题的变形]

    And Then There Was One UVALive - 3882 Sample Input   Sample Output //设f[i]为(原约瑟夫问题)第i次要删除的标号 #includ ...

  8. 九度OJ 1165:字符串匹配 (模式匹配)

    时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:3219 解决:1149 题目描述: 读入数据string[ ],然后读入一个短字符串.要求查找string[ ]中和短字符串的所有匹配,输出 ...

  9. iOS SQLite使用

    数据库的特征: 以一定方式存储在一起 能为多个用户分享 具有尽可能少的冗余代码 与程序彼此独立的数据集 SQLite SQLite是一个轻量级关系数据库,最初的设计目标是用于嵌入式系统,它占用资源非常 ...

  10. Bootstrap aggregating Bagging 合奏 Ensemble Neural Network

    zh.wikipedia.org/wiki/Bagging算法 Bagging算法 (英语:Bootstrap aggregating,引导聚集算法),又称装袋算法,是机器学习领域的一种团体学习算法. ...