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. ExpandableListView的完美实现，JSON数据源，右边自定义图片

    转载请标明出处: http://www.cnblogs.com/dingxiansen/p/8194669.html 本文出自:丁先森-博客园 最近在项目中要使用ExpandableListView来 ...

  2. C#实现冲顶大会辅助工具 (截图+图像识别+搜索)

    前两天在博客园看到 .NET开发一个微信跳一跳辅助程序, 原来可以通过C#连接手机操作.正好朋友圈有人分享"冲顶大会".冲顶大会是一个在线答题APP.每次12道题,每道题有10秒钟 ...

  3. Python第二十天 shutil 模块 zipfile tarfile 模块

    Python第二十天  shutil 模块  zipfile   tarfile 模块 os文件的操作还应该包含移动 复制  打包 压缩 解压等操作,这些os模块都没有提供 shutil 模块shut ...

  4. webpack3.x基本配置与总结

    基本配置 1.开始之前,请确定你已经安装了当前 Node 的较新版本. 2.然后在文件夹根目录下执行以下命令初始化项目并全局安装webpack: 1.$ cnpm init // 初始化项目 2.$ ...

  5. c#代码技巧

    1.#region #endregion 1.#region 是一个分块预处理命令,主要用于编辑代码分段,在编译时会自动屏蔽,同时该指令可以使代码在VS代码编辑器中折叠或展开: 2.#region必须 ...

  6. 线程安全Dictionary

    public abstract class ReadFreeCache<TKey, TValue> { protected ReadFreeCache() : this(null) { } ...

  7. MySQL ALTER TABLE: ALTER vs CHANGE vs MODIFY COLUMN

    ALTER COLUMN 语法: ALTER [COLUMN] col_name {SET DEFAULT literal | DROP DEFAULT} 作用: 设置或删除列的默认值.该操作会直接修 ...

  8. nvm 装 nodejs 重启终端失效的解决方法

    (1) 安装 nvm wget -qO- https://raw.githubusercontent.com/creationix/nvm/v0.30.1/install.sh | bash (2) ...

  9. 带以太网的MicroPython开发板：TPYBoardv201温湿度上传实例

    转载请以链接形式注明文章来源,MicroPythonQQ交流群:157816561,公众号:MicroPython玩家汇 历来关于温湿度的检测都是没有间断过的,这次我们继续检测温湿度,同样还是使用DH ...

  10. （译）JToken的层次结构

     原文地址:https://stackoverflow.com/questions/38558844/jcontainer-jobject-jtoken-and-linq-confusion/3856 ...