HTML：

<!DOCTYPE html>

<html>

<head>

  <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>

  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

  <title>Hello, World</title>

  <style type="text/css">

    html {

      height: 100%;

    }

    body {

      margin: 0px;

      padding: 0px;

      height: 100%;

    }

    #container {

      margin: 100px auto;

      width: 1300px;

      height: 700px;

    }

  </style>

</head>

<body>

<div id="container"></div>

</body>

</html>

JS：

<script type="text/javascript">

  var map = new BMap.Map("container");

  // 创建地图实例

  var point = new BMap.Point(118.024381, 36.812327);

  // 创建点坐标

  map.centerAndZoom(point, 15);

  // 初始化地图，设置中心点坐标和地图级别

  map.enableScrollWheelZoom(true);

  //自定义控件

  function ZoomControl() {

    this.defaultAnchor = BMAP_ANCHOR_TOP_LEFT;

    this.defaultOffest = new BMap.Control();

  }

  //通过JavaScript的prototype属性继承于BMap.Control

  ZoomControl.prototype = new BMap.Control();

  ZoomControl.prototype.initialize = function (map) {

    var div = document.createElement('div');

    div.appendChild(document.createTextNode("放大2级"));

    div.style.cursor = "pointer";

    div.style.border = "1px solid gray";

    div.style.backgroundColor = "white";

    div.onclick = function () {

      map.zoomTo(map.getZoom() + 2);

    };

    // 添加DOM元素到地图中

    map.getContainer().appendChild(div);

    // 将DOM元素返回

    return div;

  }

  // 创建控件实例

  var myZoomCtrl = new ZoomControl();

  // 添加到地图当中

  map.addControl(myZoomCtrl);

</script>

百度地图API：自定义控件的更多相关文章

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

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

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

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

  3. 百度地图api

    引入js <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak ...

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

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

  5. [ActionScript 3.0] AS3调用百度地图API

    package { import baidu.map.basetype.LngLat; import baidu.map.basetype.Size; import baidu.map.config. ...

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

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

  7. 百度地图API开发指南

    简介什么是百度地图API? 百度地图API是一套由JavaScript语言编写的应用程序接口,它能够帮助您在网站中构建功能丰富.交互性强的地图应用.百度地图API包含了构建地图基本功能的各种接口,提供 ...

  8. 百度地图API使用介绍

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

  9. 百度地图API调用实例之地址标注与位置显示

    之前弄了个谷歌地图API标注的调用实例,后来要求改成百度地图. 感谢主,通过网上资料(百度地图API,百度地图API详解之地图标注)收集及研究, 终于把百度地图标注和显示功能实现出来了,具体实现方法如 ...

  10. 百度地图api基本用法

    首先 ,如果想调用百度地图api,你需要获取一个百度地图api的密钥. 申请密钥很简单,在百度地图api的首页就有相关链接,填写相关信息百度就会给你一个密钥了. 接下来,就是引入百度地图的api 关键 ...

随机推荐

  1. [转帖]dd命令详解

    dd命令详解 https://czmmiao.iteye.com/blog/1748748 之前一直对linux的命令很恐惧 现在发现 其实不是那么复杂 要仔细学习就可以了 比如 dd = disk ...

  2. Docker操作删除所有容器镜像

    借鉴博客:https://www.cnblogs.com/yanyouqiang/p/8301856.html https://blog.csdn.net/wy_97/article/details/ ...

  3. v-show 与 v-if区别

    关于条件渲染 所谓条件渲染,就是根据不同的条件,使用不同的模板来生成 html. 在 Vue.js 中,使用 v-if 和 v-show 指令来控制条件渲染. 区别 v-show 会在app初始化的时 ...

  4. Eclipse的一个“bug”

    标题之所以打上双引号,是因为暂时不知道怎么确定. 一个 .java文件里有两个类:public Bath:Soap.它们都有一个main()方法. 从命令行单独访问任意一个类的main()方法,都没毛 ...

  5. Hbase数据结构模型

  6. java学习之—合并两个数组并排序

    /** * 合并两个数组并排序 * Create by Administrator * 2018/6/26 0026 * 下午 4:29 **/ public class MergeApp { pub ...

  7. WPF如何实现TreeView节点重命名

    我们经常看到一些软件比如酷狗音乐,在对列表右键进行重命名的时候,当前列表会泛白并且进入可编辑状态,当我们更改完成后就会并进入非编辑状态,这些具体是怎么实现的呢?下面的方法也许会提供一些思路,下面的Tr ...

  8. DAY08、文件操作

    一.文件操作模式汇总: 主模式: r:读模式 w:写模式(无创建,有清空) a:追加(有创建的功能) x:写,必须自己创建文件,否则报错 从模式: t:文本操作(默认模式)r >rt,w> ...

  9. python数据结构与算法第七天【链表】

    1.链表的定义 如图: 注意: (1)线性表包括顺序表和链表 (2)顺序表是将元素顺序地存放在一块连续的存储区里 (3)链表是将元素存放在通过链构造的存储快中 2. 单向链表的实现 #!/usr/bi ...

  10. 取得数据表中前N条记录，某列重复的话只取第一条记录

    项目需要筛选出不重复数据,以前没有做过,第一反应就是利用distinct处理,但是弄了好久也没搞出来,大家有知道的望告知下. 这次筛选没有使用distinct ,是利用group by ,利用id为唯 ...