1.定义js函数,用于在指定位置添加标注,在标注位置添加并打开信息窗口

    function addMarker(point, index){

      // 创建图标对象

      var myIcon = new BMap.Icon("http://api.map.baidu.com/img/markers.png", new BMap.Size(23, 25), {

        offset: new BMap.Size(10, 25),                  // 指定定位位置

        imageOffset: new BMap.Size(0, 0 - index * 25)   // 设置图片偏移

      });

      var marker = new BMap.Marker(point, {icon: myIcon});//使用图标对象创建标注

      map.addOverlay(marker);

      marker.addEventListener("click", function(){         // 标注点击事件监听

           var opts = {

               width : 250,     // 信息窗口宽度

               height: 120,     // 信息窗口高度

               title : "InfoWindow"  // 信息窗口标题

      }

      var infoWindow = new BMap.InfoWindow("Hello World!", opts);  // 创建信息窗口对象

      map.openInfoWindow(infoWindow, point);      // 在标注处打开信息窗口

     });

 }

2.随机在地图内生成5个标注

    var bounds = map.getBounds();  //获得地图边界

  
var lngSpan = bounds.maxX - bounds.minX; var latSpan = bounds.maxY - bounds.minY; for (var i = 0; i < 5; i ++) { var point = new BMap.Point(bounds.minX + lngSpan * (Math.random() * 0.7 + 0.15),bounds.minY + latSpan * (Math.random() * 0.7 + 0.15)); //在地图范围内随机生成点 addMarker(point, i);//调用1中js函数 }

3.打开浏览器看效果

百度地图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.代码很简单 var map = new BMap.Map("container"); var point = new BMap.Point(116.404, 39.915); ...

  4. 百度地图API的第一次接触——右键菜单

    1.初始化地图 var map = new BMap.Map("container"); var point = new BMap.Point(116.404, 39.915); ...

  5. 百度地图API的第一次接触——自定义控件

    1.定义一个控件类,即function function ZoomControl(){ // 设置默认停靠位置和偏移量 this.defaultAnchor = BMAP_ANCHOR_TOP_LEF ...

  6. 百度地图API显示多个标注点并添加百度样式检索窗口

    原作者博客地址:http://blog.csdn.net/a497785609/article/details/24009031 在此基础上进行了修改: 1.添加闭包,将i传入内部 2.添加地图和卫星 ...

  7. 百度地图API显示多个标注点,解决提示信息问题以及给标注增加地图旁的文字连接提示的另一种解决办法

    原文:百度地图API显示多个标注点,解决提示信息问题以及给标注增加地图旁的文字连接提示的另一种解决办法 公司的网站改版要求在一个页面显示百度地图.上面要同时显示很多标注点,标注点当然要有提示信息嘛,提 ...

  8. 【百度地图API】——如何让标注自动呈现在最佳视野内

    原文:[百度地图API]--如何让标注自动呈现在最佳视野内 摘要: “我有一堆标注,不规则的散落在地图的各个地方,我想把它们展示在一个最佳视野中,怎么办呢?”一位API爱好者咨询道. -------- ...

  9. 百度地图API显示多个标注点带百度样式信息检索窗口的代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. 请设计一个函数,用来判断在一个矩阵中是否存在一条包含某字符串所有字符的路径。路径可以从矩阵中的任意一个格子开始,每一步可以在矩阵中向左,向右,向上,向下移动一个格子。如果一条路径经过了矩阵中的某一个格子,则该路径不能再进入该格子。 例如 a b c e s f c s a d e e 矩阵中包含一条字符串"bccced"的路径,但是矩阵中不包含"abcb"路径,因为字符串的第一个字符b占据了矩阵中

    // test20.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" #include<iostream> #include< ...

  2. 【Python基础】之函数、类和方法

    一.函数 1. def定义函数 Python Shell: def add(a,b): return a+b >>>add(1,2) 3 def add(a=1,b=2): retu ...

  3. Java学习之路 第四篇 oop和class (面向对象和类)

    本人水平有限,创作本文是为了记录学习和帮助初学者学习,欢迎指正和补充 一.面向对象编程的设计概述 很多同学都在学校学了电脑的编程,现在的书籍大部分都是oop面向对象编程,一个很抽象的的名字,比较难以理 ...

  4. IdentityServer4 + SignalR Core +RabbitMQ 构建web即时通讯(一)

    IdentityServer4 + SignalR Core +RabbitMQ 构建web即时通讯 前言 .net core 2.1已经正式发布了,signalr core1.0随之发布,是时候写个 ...

  5. 一种流量成本节省60%以上的手机直播微信直播H5直播幼儿园直播方案

    前言 近几年视频直播可以说是非常火热,EasyDarwin也非常受开发者的欢迎,不仅仅是主播火了,而且各种商业直播也火了起来:会场直播.宴会直播.讲座直播.景区直播.后厨直播.课堂直播.幼儿园直播等等 ...

  6. 【WinForm】创建自定义控件(转)

    转自:http://www.cnblogs.com/bomo/archive/2012/12/09/2810559.html 虽然VS为我们提供了很多控件可以使用,但有时候这些控件仍然不能满足我们的要 ...

  7. Hadoop实战-Flume之Sink Failover(十六)

    a1.sources = r1 a1.sinks = k1 k2 a1.channels = c1 # Describe/configure the source a1.sources.r1.type ...

  8. Android OpenGL 播放视频学习

    1, 初步接触Open GL: http://www.cnblogs.com/TerryBlog/archive/2010/07/09/1774475.html 使用GLSurfaceView和Ren ...

  9. Algorithm: inversion

    inversion就是逆序对 题目:现给出一个数列,求该数列中的逆序对数(逆序数).本节给出三种方法:方法一是最直接的暴力方法:方法二是基于归并分治的思想:方法三是基于线段树的.   [解法一] 暴力 ...

  10. Flash+XML前后按钮超酷焦点图

    在线演示 本地下载