通过百度地图的api，可以在地图上显示多个标注点，并给所有的标注点实现了带检索功能的信息框

  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.  
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6. <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
  7. <title>地图检索</title>
  8. <!--css-->
  9. <link href="style/demo.css" rel="stylesheet" type="text/css" />
  10. <!--javascript-->
  11. <script src="scripts/jquery-1.9.1.js" type="text/javascript"></script>
  12. <script src="scripts/demo.js" type="text/javascript"></script>
  13. <script type="text/javascript"
  14.     src="http://api.map.baidu.com/api?v=2.0&ak=IDvNBsejl9oqMbPF316iKsXR"></script>
  15. <script type="text/javascript"
  16.     src="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.js"></script>
  17. <link rel="stylesheet"
  18.     href="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.css" />
  19. </head>
  20. <body>
  21.     <div class="demo_main" style="width: 70%;height: 90px;margin: 0px auto;">
  22.  
  23.             <div >
  24.             <a href="#"><img src="#" alt="这里是一个Logo"  style="width: 20%;height: 10%"/></a>
  25.             <hr/>
  26.             </div>
  27.  
  28.         <fieldset class="demo_content">
  29.             <div style="min-height: 450px; width: 100%;" id="map"></div>
  30.             <script type="text/javascript">
  31.                 var markerArr = [ {
  32.                     title : "安师大分部",
  33.                     point : "118.384668,31.288999",
  34.                     address : "芜湖市弋江区安徽师范大学",
  35.                     description : "安师大分部位于芜湖市弋江区安师大附近，为Ejob公司分部",
  36.                     tel : "10086"
  37.                 }, {
  38.                     title : "EasyJob总部",
  39.                     point : "118.361707,31.287487",
  40.                     address : "芜湖市弋江区 安徽信息工程学院",
  41.                     description : "Ejob大厦位于芜湖市弋江区鲁港附近，为Ejob公司综合研发及办公总部",
  42.                     tel : "10086"
  43.                 }, {
  44.                     title : "皖医分部",
  45.                     point : "118.36742,31.292764",
  46.                     address : "芜湖市弋江区皖南医学院",
  47.                     description : "皖医分部位于芜湖市弋江区皖医附近，为Ejob公司分部",
  48.                     tel : "10086"
  49.                 }, {
  50.                     title : "商贸分部",
  51.                     point : "118.37414,31.293319",
  52.                     address : "芜湖市弋江区安徽商贸职业技术学院",
  53.                     description : "商贸分部位于芜湖市弋江区商贸附近，为Ejob公司分部",
  54.                     tel : "10086"
  55.                 }, {
  56.                     title : "安机电分部",
  57.                     point : "118.367708,31.287641",
  58.                     address : "芜湖市弋江区安徽机电职业技术学院",
  59.                     description : "安机电分部位于芜湖市弋江区安机电附近，为Ejob公司安分部",
  60.                     tel : "10086"
  61.                 } ];
  62.                 function map_init() {
  63.                     var map = new BMap.Map("map"); // 创建Map实例
  64.                     var point = new BMap.Point(118.373996, 31.287641); //地图中心点
  65.                     map.centerAndZoom(point, 15); // 初始化地图,设置中心点坐标和地图级别。
  66.                     map.enableScrollWheelZoom(true); //启用滚轮放大缩小
  67.                     //地图、卫星、混合模式切换
  68.                     map.addControl(new BMap.MapTypeControl({
  69.                         mapTypes : [ BMAP_NORMAL_MAP, BMAP_SATELLITE_MAP,
  70.                                 BMAP_HYBRID_MAP ]
  71.                     }));
  72.                     //向地图中添加缩放控件
  73.                     var ctrlNav = new window.BMap.NavigationControl({
  74.                         anchor : BMAP_ANCHOR_TOP_LEFT,
  75.                         type : BMAP_NAVIGATION_CONTROL_LARGE
  76.                     });
  77.                     map.addControl(ctrlNav);
  78.                     //向地图中添加缩略图控件
  79.                     var ctrlOve = new window.BMap.OverviewMapControl({
  80.                         anchor : BMAP_ANCHOR_BOTTOM_RIGHT,
  81.                         isOpen : 1
  82.                     });
  83.                     map.addControl(ctrlOve);
  84.                     //向地图中添加比例尺控件
  85.                     var ctrlSca = new window.BMap.ScaleControl({
  86.                         anchor : BMAP_ANCHOR_BOTTOM_LEFT
  87.                     });
  88.                     map.addControl(ctrlSca);
  89.  
  90.                     var point = new Array(); //存放标注点经纬信息的数组
  91.                     var marker = new Array(); //存放标注点对象的数组
  92.                     var info = new Array(); //存放提示信息窗口对象的数组
  93.                     var searchInfoWindow = new Array();//存放检索信息窗口对象的数组
  94.                     for (var i = 0; i < markerArr.length; i++) {
  95.                         var p0 = markerArr[i].point.split(",")[0]; //
  96.                         var p1 = markerArr[i].point.split(",")[1]; //按照原数组的point格式将地图点坐标的经纬度分别提出来
  97.                         point[i] = new window.BMap.Point(p0, p1); //循环生成新的地图点
  98.                         marker[i] = new window.BMap.Marker(point[i]); //按照地图点坐标生成标记
  99.                         map.addOverlay(marker[i]);
  100.                         marker[i].setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
  101.                         //显示marker的title，marker多的话可以注释掉
  102.                         var label = new window.BMap.Label(markerArr[i].title, {
  103.                             offset : new window.BMap.Size(20, -10)
  104.                         });
  105.                         marker[i].setLabel(label);
  106.                         // 创建信息窗口对象
  107.                         info[i] = "<p style=’font-size:12px;lineheight:1.8em;’>"
  108.                                 + "</br>简介："
  109.                                 + markerArr[i].description
  110.                                 + "</br>地址："
  111.                                 + markerArr[i].address
  112.                                 + "</br> 电话：" + markerArr[i].tel + "</br></p>";
  113.                         //创建百度样式检索信息窗口对象
  114.                         searchInfoWindow[i] = new BMapLib.SearchInfoWindow(map,
  115.                                 info[i], {
  116.                                     title : markerArr[i].title, //标题
  117.                                     width : 290, //宽度
  118.                                     height : 100, //高度
  119.                                     panel : "panel", //检索结果面板
  120.                                     enableAutoPan : true, //自动平移
  121.                                     searchTypes : [ BMAPLIB_TAB_SEARCH, //周边检索
  122.                                     BMAPLIB_TAB_TO_HERE, //到这里去
  123.                                     BMAPLIB_TAB_FROM_HERE //从这里出发
  124.                                     ]
  125.                                 });
  126.                         //添加点击事件
  127.                         marker[i].addEventListener("click", (function(k) {
  128.                             // js 闭包
  129.                             return function() {
  130.                                 //将被点击marker置为中心
  131.                                 map.centerAndZoom(point[k], 18);
  132.                                 //在marker上打开检索信息窗口
  133.                                 searchInfoWindow[k].open(marker[k]);
  134.                             }
  135.                         })(i));
  136.                     }
  137.                 }
  138.                 //异步调用百度js
  139.                 function map_load() {
  140.                     var load = document.createElement("script");
  141.                     load.src = "http://api.map.baidu.com/api?v=2.0&ak=IDvNBsejl9oqMbPF316iKsXR&callback=map_init";
  142.                     document.body.appendChild(load);
  143.                 }
  144.                 window.onload = map_load;
  145.             </script>
  146.         </fieldset>
  147.     </div>
  148. </body>
  149. </html>

map

可以修改标注点样式，代码如下：

show image

  1. var myIcon = new BMap.Icon("images/logo2.png", new BMap.Size(90,53));
  2.  
  3. marker[i] = new window.BMap.Marker(point[i],{icon:myIcon});

百度地图API显示多个标注点带检索框的更多相关文章

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

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

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

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

  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. MYSQL索引结构原理、性能分析与优化

    [转]MYSQL索引结构原理.性能分析与优化 第一部分:基础知识 索引 官方介绍索引是帮助MySQL高效获取数据的数据结构.笔者理解索引相当于一本书的目录,通过目录就知道要的资料在哪里, 不用一页一页 ...

  2. 14 Iterator和for...of循环

    Iterator和for...of循环 首先 Iterator 是一个接口. 标准是 function makeIterator(array) { var nextIndex = 0; return ...

  3. tensorflow学习

    tensorflow安装时遇到gcc: error trying to exec 'as': execvp: No such file or directory. 截止到2016年11月13号,源码编 ...

  4. SQLServer-----Union,Union All的使用方法

    转载: http://blog.csdn.net/kiqinie/article/details/8132485 select a.Name from Material as a union sele ...

  5. PHP根据array_map、array_reduce和array_column获取二维数组中某个key的集合

    http://camnpr.com/php-python/1715.html 巧用array_map()和array_reduce()替代foreach循环

  6. 在使用 HttpWebRequest Post数据时候返回 400错误

    笔者有一个项目中用到了上传zip并解压的功能.开始觉得很简单,因为之前曾经做过之类的上传文件的功能,所以并不为意,于是使用copy大法.正如你所料,如果一切很正常的能运行的话就不会有这篇笔记了. 整个 ...

  7. U盘容量变小解决办法

    之前买了个三星闪盘,容量32G,USB3.0 后来装了U盘系统Kali Linux,最近想用的时候发现容量变为6GB了,真的很奇怪. 于是万能的百度(别说为什么不用谷歌,防火墙呀...) 找到解决办法 ...

  8. VBA笔记（三）——常用对象

    VBA实际上就是操作Excel,把Excel进行拆解,划分多层对象,由顶至下为(也可以说是层层包裹): Application:代表Excel程序本性,之后我们操作对象都在它之下,因为是唯一且至高点, ...

  9. SQL汉字转拼音函数-支持首字母、全拼

    SQL汉字转拼音函数-支持首字母.全拼 FROM :http://my.oschina.net/ind/blog/191659 作者不详 --方法一sqlserver汉字转拼音首字母 --调用方法 s ...

  10. javascript数组array

    注意:1.array的length不是只读的.可以从数组的末尾移出项或者向数组中添加新项.看下面例子: var colors = ["red","yellow" ...