1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4.     <title>百度地图API显示多个标注点带百度样式信息检索窗口的代码</title>
  5.     <!-- 原作博客地址：http://blog.csdn.net/a497785609/article/details/24009031 -->
  6.     <!--css-->
  7.     <link href="style/demo.css" rel="stylesheet" type="text/css" />
  8.     <!--javascript-->
  9.     <script src="scripts/jquery-1.9.1.js" type="text/javascript"></script>
  10.     <script src="scripts/demo.js" type="text/javascript"></script>
  11. <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=IDvNBsejl9oqMbPF316iKsXR"></script>
  12. <script type="text/javascript" src="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.js"></script>
  13. <link rel="stylesheet" href="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.css" />
  14. </head>
  15. <body>
  16.     <div class="demo_main">
  17.         <fieldset class="demo_title">
  18.             百度地图API显示多个标注点带提示的代码
  19.         </fieldset>
  20.         <fieldset class="demo_content">
  21.             <div style="min-height: 300px; width: 100%;" id="map">
  22.             </div>
  23.             <script type="text/javascript">
  24.                 var markerArr = [
  25.                     { title: "名称：广州火车站", point: "113.264531,23.157003", address: "广东省广州市广州火车站", tel: "12306" },
  26.                     { title: "名称：广州塔（赤岗塔）", point: "113.330934,23.113401", address: "广东省广州市广州塔（赤岗塔） ", tel: "18500000000" },
  27.                     { title: "名称：广州动物园", point: "113.312213,23.147267", address: "广东省广州市广州动物园", tel: "18500000000" },
  28.                     { title: "名称：天河公园", point: "113.372867,23.134274", address: "广东省广州市天河公园", tel: "18500000000" }
  29.                 ];
  30.                 function map_init() {
  31.                     var map = new BMap.Map("map"); // 创建Map实例
  32.                     var point = new BMap.Point(113.312213, 23.147267); //地图中心点，广州市
  33.                     map.centerAndZoom(point, 13); // 初始化地图,设置中心点坐标和地图级别。
  34.                     map.enableScrollWheelZoom(true); //启用滚轮放大缩小
  35.                     //地图、卫星、混合模式切换
  36.                     map.addControl(new BMap.MapTypeControl({mapTypes: [BMAP_NORMAL_MAP, BMAP_SATELLITE_MAP, BMAP_HYBRID_MAP]}));
  37.                     //向地图中添加缩放控件
  38.                     var ctrlNav = new window.BMap.NavigationControl({
  39.                         anchor: BMAP_ANCHOR_TOP_LEFT,
  40.                         type: BMAP_NAVIGATION_CONTROL_LARGE
  41.                     });
  42.                     map.addControl(ctrlNav);
  43.                     //向地图中添加缩略图控件
  44.                     var ctrlOve = new window.BMap.OverviewMapControl({
  45.                         anchor: BMAP_ANCHOR_BOTTOM_RIGHT,
  46.                         isOpen: 1
  47.                     });
  48.                     map.addControl(ctrlOve);
  49.                     //向地图中添加比例尺控件
  50.                     var ctrlSca = new window.BMap.ScaleControl({
  51.                         anchor: BMAP_ANCHOR_BOTTOM_LEFT
  52.                     });
  53.                     map.addControl(ctrlSca);
  54.  
  55.                     var point = new Array(); //存放标注点经纬信息的数组
  56.                     var marker = new Array(); //存放标注点对象的数组
  57.                     var info = new Array(); //存放提示信息窗口对象的数组
  58.                     var searchInfoWindow =new Array();//存放检索信息窗口对象的数组
  59.                     for (var i = 0; i < markerArr.length; i++) {
  60.                         var p0 = markerArr[i].point.split(",")[0]; //
  61.                         var p1 = markerArr[i].point.split(",")[1]; //按照原数组的point格式将地图点坐标的经纬度分别提出来
  62.                         point[i] = new window.BMap.Point(p0, p1); //循环生成新的地图点
  63.                         marker[i] = new window.BMap.Marker(point[i]); //按照地图点坐标生成标记
  64.                         map.addOverlay(marker[i]);
  65.                         marker[i].setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
  66. 　　　　　　　　　　　　　　//显示marker的title，marker多的话可以注释掉
  67.                         var label = new window.BMap.Label(markerArr[i].title, { offset: new window.BMap.Size(20, -10) });
  68.                         marker[i].setLabel(label);
  69.                         // 创建信息窗口对象
  70.                         info[i] = "<p style=’font-size:12px;lineheight:1.8em;’>" + "</br>地址：" + markerArr[i].address + "</br> 电话：" + markerArr[i].tel + "</br></p>";
  71.                         //创建百度样式检索信息窗口对象
  72.                         searchInfoWindow[i] = new BMapLib.SearchInfoWindow(map, info[i], {
  73.                                 title  : markerArr[i].title,      //标题
  74.                                 width  : 290,             //宽度
  75.                                 height : 55,              //高度
  76.                                 panel  : "panel",         //检索结果面板
  77.                                 enableAutoPan : true,     //自动平移
  78.                                 searchTypes   :[
  79.                                     BMAPLIB_TAB_SEARCH,   //周边检索
  80.                                     BMAPLIB_TAB_TO_HERE,  //到这里去
  81.                                     BMAPLIB_TAB_FROM_HERE //从这里出发
  82.                                 ]
  83.                             });
  84.                         //添加点击事件
  85.                         marker[i].addEventListener("click",
  86.                             (function(k){
  87.                                 // js 闭包
  88.                                 return function(){
  89.                                     //将被点击marker置为中心
  90.                                     //map.centerAndZoom(point[k], 18);
  91.                                     //在marker上打开检索信息窗口
  92.                                     searchInfoWindow[k].open(marker[k]);
  93.                                 }
  94.                             })(i)
  95.                         );
  96.                     }
  97.                 }
  98.                 //异步调用百度js
  99.                 function map_load() {
  100.                     var load = document.createElement("script");
  101.                     load.src = "http://api.map.baidu.com/api?v=2.0&ak=IDvNBsejl9oqMbPF316iKsXR&callback=map_init";
  102.                     document.body.appendChild(load);
  103.                 }
  104.                 window.onload = map_load;
  105.             </script>
  106.         </fieldset>
  107.     </div>
  108. </body>
  109. </html>

百度地图API显示多个标注点带百度样式信息检索窗口的代码的更多相关文章

  1. 百度地图API显示多个标注点带提示的代码 / 单个标注点带提示代码

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  2. 百度地图API显示多个标注点带检索框

    通过百度地图的api,可以在地图上显示多个标注点,并给所有的标注点实现了带检索功能的信息框 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 T ...

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

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

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

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

  5. 百度地图API二：根据标注点坐标范围计算显示缩放级别zoom自适应显示地图

    原文:百度地图API二:根据标注点坐标范围计算显示缩放级别zoom自适应显示地图 版权声明:本文为博主原创文章,转载请注明出处. https://blog.csdn.net/liusaint1992/ ...

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

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

  7. 百度地图API 显示区域边界及地名定位

    百度地图API 显示区域边界及地名定位 这个定位一共用了两个方法组成 一个是定位绘制区域边界线,另一个是地名定位 原理: 当用户输入省.市.县.区这种大地名时,我们要定位用户输入的这个位置,并显示轮廓 ...

  8. 百度地图API示例之文本标注

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

  9. 百度地图api之如何自定义标注图标

    在百度地图api中,默认的地图图标是一个红色的椭圆形.但是在项目中常常要求我们建立自己的图标,类似于我的这个 操作很简单,分如下几步进行 步骤一:先ps一个图标,大小要合适,如果要背景透明的,记得保存 ...

随机推荐

  1. 基于zepto的移动端日期和时间选择控件

    前段时间给大家分享过一个基于jQuery Mobile的移动端日期时间拾取器,大家反应其由于加载过大的插件导致影响调用速度.那么今天我把从网络上搜集到的两个适合移动端应用的日期和时间选择插件分享给大家 ...

  2. 搭建subversion 服务器，并自动部署项目

    1 subversion目录文件说明: *dav目录:是提供apache与mod_dav_svn使用的目录,让他们存储内部数据*db目录:就是所有版本控制的数据存放文件*hooks目录:放置hook脚 ...

  3. java 连接 postgresql

    最近公司用postgresql这个数据库,看网上说这个数据库还算好用,自己就用了一下,我就是用java连接了一下数据库. 其实每个数据库的连接方式大致相同,只是用到的驱动不同,用不同数据库只需要换不同 ...

  4. HTML5新特性:元素的classList属性与应用

    在html5新增的classList之前, 操作元素的class用的是className这个属性,而如果要向jquery封装的hasClass, removeClass, addClass, togg ...

  5. php 事务处理transaction

    MySQL 事务主要用于处理操作量大,复杂度高的数据.比如说,在人员管理系统中,你删除一个人员,你即需要删除人员的基本资料,也要删除和该人员相关的信息,如信箱,文章等等,这样,这些数据库操作语句就构成 ...

  6. opacity的背景透明&background中rgba的背景色透明

    近期使用css实现了一个loading旋转加载的图片效果,类似gif动画 过程中,需要透明背景,但是图片不要透明 只要背景透明!只要背景透明!只要背景透明! 这里对透明模糊了,两种写法,模糊了 A: ...

  7. Go从三个站点中返回响应最快的

    利用协程可以轻松实现 package main import ( "fmt" "github.com/imroc/req" ) func mirroredQue ...

  8. iOS开发的另类神器：libimobiledevice开源包【类似android adb 方便获取iOS设备信息】

    简介 libimobiledevice又称libiphone,是一个开源包,可以让Linux支持连接iPhone/iPod Touch等iOS设备.由于苹果官方并不支持Linux系统,但是Linux上 ...

  9. jquery/Js属性无效

    今天遇到个很奇葩的问题,就是checkbox的onchange时间无效,我一共写了两个checkbox的onchange事件,但就是只有一个能用,本来我以为是jquery的兼容问题,但是换成js还是不 ...

  10. NoSQL:Linux操作memcached

    一 NoSQL简介 NoSQL(NoSQL = Not Only SQL ),意即"不仅仅是SQL",泛指非关系型的数据库,随着互联网web2.0网站的兴起,传统的关系数据库在应付 ...