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. 让uboot的tftp支持上传功能

    转载:http://blog.chinaunix.net/uid-20737871-id-2124122.html uboot下的tftp下载功能是非常重要和常见的功能.但是偶尔有些特殊需求的人需要使 ...

  2. 常用yum命令小结

    基于rpm的软件包管理器 yum,是Yellow dog Updater, Modified的简称,是一种软件包管理器.它能够从指定的服务器自动下载RPM包并安装,可以自动处理依赖性关系,并且一次安装 ...

  3. 01 http协议概念及工作流程

    一:HTTP协议 重要性: 无论是以后用webserverice ,还是用rest做大型架构,都离不开对HTTP协议的认识. 甚至可以简化的说: webservice = http协议+XML Res ...

  4. 018 nginx与第三模块整合[一致性哈希模块整合]

    nginx第三方模块官网:http://wiki.nginx.org/HttpUpstreamConsistentHash nginx第三方模块下载地址:https://github.com/repl ...

  5. ssh无密码登陆权威指南

    [0]写在前面 由于ssh 实现的是免密码登陆,大致步骤是: 0.1) client通过ssh登陆到server: 0.2) server检查家目录下的.ssh文件, 并发送公钥文件 authoriz ...

  6. Android - 使用messager实现进程间通信(服务器端→客户端,客户端→服务器端双向)

    之前看了一篇,然后不自己动手肯定是不行的,然后自己又写了一遍. 背景: 一般使用messenger进行进程间通信的时候,我们只能进行单方向通信.但是有没有办法让服务器端和客户端进行双向通信呢? 解决思 ...

  7. python 基础 2.4 while 循环

    #/usr/bin/python #coding=utf-8 #@Time :2017/10/18 15:31 #@Auther :liuzhenchuan #@File :while 循环.py 示 ...

  8. python 基础 1.5 数据类型(二)--列表

    一.python 数据类型序列---列表 1.列表是可变型的数据类型.列表里边的元素是可变的,可以增加,可以删除.   2.列表(list)是处理一组有序项目的数据结构,即可以在列表中存储一个序列的项 ...

  9. Javascript模块化编程-require.js[3]

    很多情况下,JS都是放到一个或者多个文件里,只要加载这些文件就可以了. 但是对于一些小型项目而言,这种写法是没有任何问题的. 但是对于某些大型网站,JS的量是很大的,如果还采用这种方式,网站时常在加载 ...

  10. CSS各种度量单位----px、em、%、rem、vh/vw、vmin/vmax

    本文主要讲下CSS中各类度量单位的意思和区别. 开发中最常用到的css单位是px.em.%.随着css3的出现,带来了更多的度量单位,这些单位为响应式开发,带来很大的好处.各种单位的浏览器兼容性可以去 ...