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

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

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

    <!-- 原作博客地址：http://blog.csdn.net/a497785609/article/details/24009031 -->

    <!--css-->

    <link href="style/demo.css" rel="stylesheet" type="text/css" />

    <!--javascript-->

    <script src="scripts/jquery-1.9.1.js" type="text/javascript"></script>

    <script src="scripts/demo.js" type="text/javascript"></script>

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

<script type="text/javascript" src="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.js"></script>

<link rel="stylesheet" href="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.css" />

</head>

<body>

    <div class="demo_main">

        <fieldset class="demo_title">

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

        </fieldset>

        <fieldset class="demo_content">

            <div style="min-height: 300px; width: 100%;" id="map">

            </div>

            <script type="text/javascript">

                var markerArr = [

                    { title: "名称：广州火车站", point: "113.264531,23.157003", address: "广东省广州市广州火车站", tel: "12306" },

                    { title: "名称：广州塔（赤岗塔）", point: "113.330934,23.113401", address: "广东省广州市广州塔（赤岗塔） ", tel: "18500000000" },

                    { title: "名称：广州动物园", point: "113.312213,23.147267", address: "广东省广州市广州动物园", tel: "18500000000" },

                    { title: "名称：天河公园", point: "113.372867,23.134274", address: "广东省广州市天河公园", tel: "18500000000" }

                ];

                function map_init() {

                    var map = new BMap.Map("map"); // 创建Map实例

                    var point = new BMap.Point(113.312213, 23.147267); //地图中心点，广州市

                    map.centerAndZoom(point, 13); // 初始化地图,设置中心点坐标和地图级别。

                    map.enableScrollWheelZoom(true); //启用滚轮放大缩小

                    //地图、卫星、混合模式切换

                    map.addControl(new BMap.MapTypeControl({mapTypes: [BMAP_NORMAL_MAP, BMAP_SATELLITE_MAP, BMAP_HYBRID_MAP]}));

                    //向地图中添加缩放控件

                    var ctrlNav = new window.BMap.NavigationControl({

                        anchor: BMAP_ANCHOR_TOP_LEFT,

                        type: BMAP_NAVIGATION_CONTROL_LARGE

                    });

                    map.addControl(ctrlNav);

                    //向地图中添加缩略图控件

                    var ctrlOve = new window.BMap.OverviewMapControl({

                        anchor: BMAP_ANCHOR_BOTTOM_RIGHT,

                        isOpen: 1

                    });

                    map.addControl(ctrlOve);

                    //向地图中添加比例尺控件

                    var ctrlSca = new window.BMap.ScaleControl({

                        anchor: BMAP_ANCHOR_BOTTOM_LEFT

                    });

                    map.addControl(ctrlSca);

                    var point = new Array(); //存放标注点经纬信息的数组

                    var marker = new Array(); //存放标注点对象的数组

                    var info = new Array(); //存放提示信息窗口对象的数组

                    var searchInfoWindow =new Array();//存放检索信息窗口对象的数组

                    for (var i = 0; i < markerArr.length; i++) {

                        var p0 = markerArr[i].point.split(",")[0]; //

                        var p1 = markerArr[i].point.split(",")[1]; //按照原数组的point格式将地图点坐标的经纬度分别提出来

                        point[i] = new window.BMap.Point(p0, p1); //循环生成新的地图点

                        marker[i] = new window.BMap.Marker(point[i]); //按照地图点坐标生成标记

                        map.addOverlay(marker[i]);

                        marker[i].setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画

　　　　　　　　　　　　　　//显示marker的title，marker多的话可以注释掉

                        var label = new window.BMap.Label(markerArr[i].title, { offset: new window.BMap.Size(20, -10) });

                        marker[i].setLabel(label);

                        // 创建信息窗口对象

                        info[i] = "<p style=’font-size:12px;lineheight:1.8em;’>" + "</br>地址：" + markerArr[i].address + "</br> 电话：" + markerArr[i].tel + "</br></p>";

                        //创建百度样式检索信息窗口对象

                        searchInfoWindow[i] = new BMapLib.SearchInfoWindow(map, info[i], {

                                title  : markerArr[i].title,      //标题

                                width  : 290,             //宽度

                                height : 55,              //高度

                                panel  : "panel",         //检索结果面板

                                enableAutoPan : true,     //自动平移

                                searchTypes   :[

                                    BMAPLIB_TAB_SEARCH,   //周边检索

                                    BMAPLIB_TAB_TO_HERE,  //到这里去

                                    BMAPLIB_TAB_FROM_HERE //从这里出发

                                ]

                            });

                        //添加点击事件

                        marker[i].addEventListener("click",

                            (function(k){

                                // js 闭包

                                return function(){

                                    //将被点击marker置为中心

                                    //map.centerAndZoom(point[k], 18);

                                    //在marker上打开检索信息窗口

                                    searchInfoWindow[k].open(marker[k]);

                                }

                            })(i)

                        );

                    }

                }

                //异步调用百度js

                function map_load() {

                    var load = document.createElement("script");

                    load.src = "http://api.map.baidu.com/api?v=2.0&ak=IDvNBsejl9oqMbPF316iKsXR&callback=map_init";

                    document.body.appendChild(load);

                }

                window.onload = map_load;

            </script>

        </fieldset>

    </div>

</body>

</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. 使用line-height来垂直居中在安卓设备并不居中，利用ji调整

    先判断智能机浏览器的版本信息:方法有两种,但是第一种兼容性更好,但是使用了device插件 第一种: if (device.android()){ } 第二种: var ua = navigator. ...

  2. 佛祖保佑永无bug的源代码

    ${AnsiColor.BRIGHT_YELLOW} ${AnsiColor.BRIGHT_RED}_ooOoo_${AnsiColor.BRIGHT_YELLOW} ${AnsiColor.BRIG ...

  3. vue 全局插槽 全局插座

    场景: slot 能够让父组件内容插入到子组件中,但是子孙组件不能够使用slot直接插入内容.在弹窗的时候,全屏弹窗需要直接在组件最上层显示,如果父组件级别不够,弹出就可能不是全屏的. 知识点: 1: ...

  4. Hadoop源码篇---解读Mapprer源码Input输入

    一.前述 上次分析了客户端源码,这次分析mapper源码让大家对hadoop框架有更清晰的认识 二.代码 自定义代码如下: public class MyMapper extends Mapper&l ...

  5. NanUI文档 - 如何实现C#与Javascript的相互通信

    NanUI文档目录 NanUI简介 开始使用NanUI 打包并使用内嵌式的HTML/CSS/JS资源 使用网页来设计整个窗口 如何实现C#与Javascript的相互通信 如何处理NanUI中的下载过 ...

  6. Pyqt4的对话框 -- 文件对话框

    文件对话框允许用户选择文件或文件夹,被选择的文件可进行读或写操作 # QInputDialog 文件对话框 # 本示例包含一个菜单栏,一个状态栏和一个被设置为中心部件的文本编辑器. # 状态栏的状态信 ...

  7. webgl鱼眼算法

    在网页上面实现,采用的是球面映射和材质线性映射,这里注意的是用线性映射保留了球面的感觉,而不是采用sin映射,sin映射在边缘会产生很难看的效果. 最后效果如下:

  8. 使用FormatMessage函数编写一个内核错误码查看器

    在编写驱动程序的时候,常用的一个结构是NTSTATUS,它来表示操作是否成功,但是对于失败的情况它的返回码过多,不可能记住所有的情况,应用层有一个GetLastError函数,根据这个函数的返回值可以 ...

  9. 转载自 BotVS 「 珍藏版 」如何搭建一个完整的交易框架

    [img]http://dn-filebox.qbox.me/8c218c119046b2a25df2d9c7b00c1e0fa6899bdd.png[/img]NO:01 交易策略 ≠ 交易系统. ...

  10. ComboBox 中 DisplayMember 和 ValueMember 都是具体干什么的?

    ComboBox组件的数据绑定,在得到数据集后,只有设定好ComboBox组件的的三个属性就可以完成数据绑定了,这三个属性是:"DisplayMember". "Valu ...