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

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

二，代码：

<!DOCTYPE html>

<html>

<head>

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

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

    <style type="text/css">

        body, html, #allmap {

            width: 100%;

            height: 100%;

            overflow: hidden;

            margin: 0;

            font-family: "微软雅黑";

            font-size: 14px;

        }

    </style>

    <script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>

    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=31hnqKEhOUOWFXXxvWYXiM1v"></script>

    <!--加载鼠标绘制工具-->

    <script type="text/javascript" src="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.js"></script>

    <link rel="stylesheet" href="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.css" />

    <title></title>

</head>

<body>

<div id="allmap">

</div>

</body>

</html>

<script type="text/javascript">

    // 百度地图API功能

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

    var point = new BMap.Point(116.404, 39.915);

    map.centerAndZoom(point, 15);

    map.enableScrollWheelZoom();

    map.enableContinuousZoom();

    // 随机向地图添加5个标注

    var bounds = map.getBounds();

    var sw = bounds.getSouthWest();

    var ne = bounds.getNorthEast();

    var lngSpan = Math.abs(sw.lng - ne.lng);

    var latSpan = Math.abs(ne.lat - sw.lat);

    for (var i = 0; i < 5; i ++) {

        var point = new BMap.Point(sw.lng + lngSpan * (Math.random() * 0.7), ne.lat - latSpan * (Math.random() * 0.7));

        var marker = new BMap.Marker(point);

        var html = "经度"+point.lng;

        //设置infoWindow的大小

        var fourOpts = {

            width:50,

            height:25

        }

        var infoWindow = new BMap.InfoWindow(html,fourOpts);

        marker.infoWindow=infoWindow;

        marker.addEventListener("click", function(e){

            //*********这里是重点*********，当有多个点时获取每个点的信息

            this.openInfoWindow(e.target.infoWindow);

        });

        map.addOverlay(marker);

    }

</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. 好系统重装助手教你清理win7系统中DNS缓存

    在我们使用电脑的过程中,有时候一个经常用的网页突然打不开了,遇到这种情况,清理一下DNS缓存就可以解决了.如何清理DNS缓存?小编这就给大家说一种最简单的方法. 1.组合键:win+R,输入cmd,点 ...

  2. python3编写网络爬虫19-app爬取

    一.app爬取 前面都是介绍爬取Web网页的内容,随着移动互联网的发展,越来越多的企业并没有提供Web页面端的服务,而是直接开发了App,更多信息都是通过App展示的 App爬取相比Web端更加容易 ...

  3. Angular 开发小妙招1：提交表单数据验证不通过，更改输入组件的样式

    开发表单时,客户端数据完整性校验是必不可少的,在jquery 时代出现了无数的数据验证插件也很好用,开发Angular 应用时,angular 内置了一些常用的数据验证指令.今天要讲的不是这些指令如何 ...

  4. flask的migrate

    https://blog.csdn.net/kevin_qq/article/details/51777190 这个方法可以: https://www.cnblogs.com/caicairui/p/ ...

  5. Web开发人员vs网页设计师

    Web开发人员vs网页设计师 我们都遇到过,但实际的区别是什么?如果您是该领域的新手,请阅读详细内容,这些内容比您想象的更重要. 经过几周(或几个月)的规划和准备,进行市场调查,与其他企业家交谈,现在 ...

  6. zabbix图形乱码问题解决办法

    zabbix中的图形乱码的问题解决办法: 1.下载字体,例如:simkai.ttf楷体(注:在windows中的字体格式可能是TTC的,所以去网上下载一个ttf的字体) 2.上传到linux中(我使用 ...

  7. len()方法

    len() 方法返回对象(字符.列表.元组等)长度或项目个数 len()方法语法: len( 对象 )

  8. Python 文件编译为字节码的方法

    一般情况下 python 不需要手动编译字节码.但是如果不想直接 release 源代码给其他人,将文件编译成字节码,可以实现一定程度的信息隐藏. 1) 使用模块 py_compile 编译一个单文件 ...

  9. day15--认识模块、导入模块、自执行与模块的区别

    一.认识模块 什么是模块? 模块本质是一些功能的集合体 创建的一个py文件就是一个模块 使用模块: 在使用模块的py文件中 通过  import 或者 from import导入模块 模块的优点: 可 ...

  10. Mac支持ntfs格式的移动硬盘读写操作

    转好文:https://blog.csdn.net/u013247765/article/details/77932144 本机环境: macOS Sierra version 10.12.6 201 ...