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. erlang中的图片下载

    问题如题,这是在一个群里问的一个的问题.其实就是http的Server的上传下载的功能.  ibrowse:start().ibrowse:send_req("http://img1.gti ...

  2. 【文献阅读】Stack What-Where Auto-encoders -ICLR-2016

    一.Abstract 提出一种新的autoencoder -- SWWAE(stacked what-where auto-encoders),更准确的说是一种 convolutional autoe ...

  3. 2014年java软件project师面试题收集

    如果页面中于五个li标签.写个js使点击每个li返回他的index <!doctype html> <html> <head> <style> li{c ...

  4. PDO:: 数据访问抽象层 ? :

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. HTML5画布(基础篇11-10)

    <script type="text/javascript"> $(function(){ var s = $("#myCanvas")[0]; v ...

  6. 题解 P1001 【A+B Problem】

    #include<iostream> using namespace std; #define I int a,b; #define AK cin>>a>>b; # ...

  7. Raspberry Pi3 ~ 使用eclipse进行远程调试

    为了开发方便需要在电脑上对树莓派进行远程Debug. l  在eclipse中安装交叉编译(参照开发环境搭建)    arm-linux-gnueabihf-gcc l  树莓派中检查是否安装了gdb ...

  8. systemclock sleep 睡眠

  9. Quartz Job scheduling 基础实现代码

    Quartz 集成在 SpringBoot 中分为 config.task.utils.controller 和 MVC 的三层即 controller.service.dao 和 entity. c ...

  10. BA优化PnP的思路

    由之前的PnP,可以求出一个R,t,K又是已知的.而且空间点的世界坐标知道,第二个相机位姿的像素坐标也是知道的.就可以利用它们进行优化.首先确定变量为const vector<Point3f&g ...