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. 【WPF学习笔记】之如何点击“新建”按钮,在面板中加载一条条的“用户控件”的信息:动画系列之(四)

    ...... 承接上一系列动画三. 在主界面后台代码设置嵌套第二个用户控件. using System; using System.Collections.Generic; using System. ...

  2. 解决Oracle用户被锁定的方法

    解决Oracle用户被锁定的方法 1,cmd控制台: 使用sqlplus 命令:sqlplus sys/密码@ip/orcl as sysdba; 2,先设置具体时间格式,以便查看具体时间 SQL&g ...

  3. 认识XmlReader

    认识XmlReader   摘要 XmlReader类是组成.NET的关键技术之一,极大地方便了开发人员对Xml的操作.通过本文您将对XmlReader有一个很好的认识,并将其应用到实际开发中. 目录 ...

  4. Python—发邮件总结

    来自: http://my.oschina.net/jhao104/blog/613774 1.登录SMTP服务器 首先使用网上的方法(这里使用163邮箱,smtp.163.com是smtp服务器地址 ...

  5. poj 3071 Football <DP>

    链接:http://poj.org/problem?id=3071 题意: 有 2^n 支足球队,编号 1~2^n,现在给出每支球队打败其他球队的概率,问哪只球队取得冠军的概率最大? 思路: 设dp[ ...

  6. google guice

    1 google guice是什么 google guice是一个轻量的DI容器. 2 guice和spring对比 spring的配置放在xm文件中,guice的配置放在Module中. guice ...

  7. mysql系列之9.mysql日志&存储引擎

    mysqlbinlog 是什么? 数据目录下的如下文件: mysql-bin.xxxxxx 作用? 记录数据库内部增删改查对mysql数据库有更新的内容的记录 三种模式? statement leve ...

  8. php总结8——mysql函数库、增删改

    8.1 mysql函数库 php的函数   .php中用来操作mysql函数库的函数 常用函数 mysql_connect("主机名称/ip","用户名",&q ...

  9. linux 防火墙配置与REJECT导致没有生效问题

    1.进入到/etc/sysconfig 如图 2.使用vi命令对iptables进行编辑."vi iptables",然后显示如图 # Firewall configuration ...

  10. (1366, "Incorrect string value: '\\xF3\\xB0\\x84\\xBC</...' for column 'content' at row 1")

    插数据库报错 (1366, "Incorrect string value: '\\xF3\\xB0\\x84\\xBC</...' for column 'content' at r ...