一，地图上多个覆盖物(Marker).

当有多个覆盖物时，我们需要获取每个点的信息。如下图，每个Marker的经度都不相同

二，代码：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5.     <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
  6.     <style type="text/css">
  7.         body, html, #allmap {
  8.             width: 100%;
  9.             height: 100%;
  10.             overflow: hidden;
  11.             margin: 0;
  12.             font-family: "微软雅黑";
  13.             font-size: 14px;
  14.         }
  15.     </style>
  16.     <script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
  17.     <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=31hnqKEhOUOWFXXxvWYXiM1v"></script>
  18.     <!--加载鼠标绘制工具-->
  19.     <script type="text/javascript" src="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.js"></script>
  20.     <link rel="stylesheet" href="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.css" />
  21.     <title></title>
  22. </head>
  23. <body>
  24. <div id="allmap">
  25. </div>
  26. </body>
  27. </html>
  28.  
  29. <script type="text/javascript">
  30.  
  31.     // 百度地图API功能
  32.     var map = new BMap.Map("allmap");
  33.     var point = new BMap.Point(116.404, 39.915);
  34.     map.centerAndZoom(point, 15);
  35.     map.enableScrollWheelZoom();
  36.     map.enableContinuousZoom();
  37.  
  38.     // 随机向地图添加5个标注
  39.     var bounds = map.getBounds();
  40.     var sw = bounds.getSouthWest();
  41.     var ne = bounds.getNorthEast();
  42.     var lngSpan = Math.abs(sw.lng - ne.lng);
  43.     var latSpan = Math.abs(ne.lat - sw.lat);
  44.     for (var i = 0; i < 5; i ++) {
  45.         var point = new BMap.Point(sw.lng + lngSpan * (Math.random() * 0.7), ne.lat - latSpan * (Math.random() * 0.7));
  46.         var marker = new BMap.Marker(point);
  47.         var html = "经度"+point.lng;
  48.  
  49.         //设置infoWindow的大小
  50.         var fourOpts = {
  51.             width:50,
  52.             height:25
  53.         }
  54.         var infoWindow = new BMap.InfoWindow(html,fourOpts);
  55.         marker.infoWindow=infoWindow;
  56.         marker.addEventListener("click", function(e){
  57.             //*********这里是重点*********，当有多个点时获取每个点的信息
  58.             this.openInfoWindow(e.target.infoWindow);
  59.         });
  60.         map.addOverlay(marker);
  61.     }
  62. </script>

百度地图开发者API学习笔记二的更多相关文章

  1. 百度地图开发者API学习笔记一(转载)

    一,实现功能: 在地图上标记点,划线等操作.如下图. 2.代码: <!DOCTYPE html> <html> <head> <meta http-equiv ...

  2. WPF技术触屏上的应用系列（二）: 嵌入百度地图、API调用及结合本地数据库在地图上进行自定义标点的实现

    原文:WPF技术触屏上的应用系列(二): 嵌入百度地图.API调用及结合本地数据库在地图上进行自定义标点的实现 去年某客户单位要做个大屏触屏应用,要对档案资源进行展示之用.客户端是Window7操作系 ...

  3. ZooKeeper学习笔记二：API基本使用

    Grey ZooKeeper学习笔记二:API基本使用 准备工作 搭建一个zk集群,参考ZooKeeper学习笔记一:集群搭建. 确保项目可以访问集群的每个节点 新建一个基于jdk1.8的maven项 ...

  4. ASP.NET MVC Web API 学习笔记---第一个Web API程序

    http://www.cnblogs.com/qingyuan/archive/2012/10/12/2720824.html GetListAll /api/Contact GetListBySex ...

  5. 百度地图JavaScript API使用

    最近在完成优达学城前端开发(入门)课程的P4项目中,要求调用google地图进行交互,项目已提供部分js代码和html代码.但在申请google地图API密钥时由于网络等原因,打不开或者连接超时,所以 ...

  6. ES6学习笔记<二>arrow functions 箭头函数、template string、destructuring

    接着上一篇的说. arrow functions 箭头函数 => 更便捷的函数声明 document.getElementById("click_1").onclick = ...

  7. AJax 学习笔记二(onreadystatechange的作用)

    AJax 学习笔记二(onreadystatechange的作用) 当发送一个请求后,客户端无法确定什么时候会完成这个请求,所以需要用事件机制来捕获请求的状态XMLHttpRequest对象提供了on ...

  8. java之jvm学习笔记二(类装载器的体系结构)

    java的class只在需要的时候才内转载入内存,并由java虚拟机的执行引擎来执行,而执行引擎从总的来说主要的执行方式分为四种, 第一种,一次性解释代码,也就是当字节码转载到内存后,每次需要都会重新 ...

  9. NumPy学习笔记 二

    NumPy学习笔记 二 <NumPy学习笔记>系列将记录学习NumPy过程中的动手笔记,前期的参考书是<Python数据分析基础教程 NumPy学习指南>第二版.<数学分 ...

随机推荐

  1. Python 提案

    学习Java 不可不知JSR,学习Python自然也得知道 PEP了 1- PEP简介 PEP是Python增强提案(Python Enhancement Proposal)的缩写.https://w ...

  2. 终极 Shell——ZSH

    Shell是Linux/Unix的一个外壳,你理解成衣服也行.它负责外界与Linux内核的交互,接收用户或其他应用程序的命令,然后把这些命令转化成内核能理解的语言,传给内核,内核是真正干活的,干完之后 ...

  3. ubuntu 安装FoxitReader福昕阅读器(转载）

    虽然不怎么用Ubuntu来看文档,但是偶尔还是需要看一下的.而Ubuntu自带的打开PDF的软件真的看着很难受,装一个跨平台的福昕好了. 首先,下载.可以官网下载:福昕官网 不过晚上不知道网络抽风还是 ...

  4. Elixir 单元测试

    概述 elixir 中自带了单元测试框架 ExUnit ,其中提供单元测试的一系列,主要包含以下模块: ExUnit: 单元测试框架 ExUnit.Assertions: 断言 ExUnit.Case ...

  5. Linux 小知识翻译 - 「日志」（log）

    这次聊聊「日志」. 「日志」主要指系统或者软件留下的「记录」.出自表示「航海日志」的「logbook」. 经常听说「出现问题的时候,或者程序没有安装自己预期的来运行的时候,请看看日志!」. 确实,记录 ...

  6. VS2013 创建ASP.NET MVC 4.0 未指定的错误（异常来自HRESULT: 0x80004005（e_fail））

    这个错误是真的头疼,尝试各种办法都没用,最后解决用的方法是: 找到 vs_ultimate.exe 修复文件,我的文件位置在 C:\ProgramData\Package Cache\{4d78654 ...

  7. tomcat session 共享

    1. nginx+tomcat7+memcached 安装JDK7sudo apt-get install java7-jdk 安装tomcat7Tomcat7下载地址http://mirror.bj ...

  8. 在win7下python的xlrd和xlwt的安装于应用

    1. http://pypi.python.org/pypi/xlwt 和http://pypi.python.org/pypi/xlrd下载xlwt-0.7.4.tar.gz和xlrd-0.7.7. ...

  9. 直接运行vue+django项目

    直接运行vue+django项目 下载前后端代码 wget https://files.cnblogs.com/files/pyyu/luffy_boy.zip wget https://files. ...

  10. linux命令中的“<”和“|”是什么意思？

    ”<” 表示的是输入重定向的意思,就是把<后面跟的文件取代键盘作为新的输入设备.”| ”则表示一个管道的意思,可以理解为东西从管道的一边流向另外一边.   cat file.json | ...