<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <script src="/js/jquery-1.10.1.min.js" type="text/javascript"></script>
    <style type="text/css">
        body, html, #allmap
        {
            width: 100%;
            height: 100%;
            overflow: hidden;
            margin: 0;
            font-family: "微软雅黑";
        }
    </style>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=44GDhGR0o4mDEoC3w2yFEkFH"></script>
    <script type="text/javascript" src="http://developer.baidu.com/map/jsdemo/demo/changeMore.js"></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" />
    <title>百度地图API 批量添加 带检索功能的信息窗口</title>
</head>
<body>
    <div id="allmap">
    </div>
    <div id="img" style="display: none">
        请先选择城市<img src="/images/001.jpg" width="708px" height="486px" /></div>
</body>

<script language="javascript" type="text/javascript">
    var _subList = <%=strHtml%>
    var _citys = '<%=strCity %>'
    var gpsPoints = [];
    if (_citys != "") {
        // 百度地图API功能
        var map = new BMap.Map("allmap");  // 创建Map实例
        map.centerAndZoom(_citys, 13);      // 初始化地图,用城市名设置地图中心点
        map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
        var navigationControl = new BMap.NavigationControl({
            // 靠左上角位置
            anchor: BMAP_ANCHOR_TOP_LEFT,
            // LARGE类型
            type: BMAP_NAVIGATION_CONTROL_LARGE,
            // 启用显示定位
            enableGeolocation: true
        });

        function callback(xyResults) {
            var xyResult = null;
            var point = new Array(); //存放标注点经纬信息的数组
            var marker = new Array(); //存放标注点对象的数组
            var content = new Array(); //存放提示信息窗口对象的数组
            var searchInfoWindow = new Array(); //存放检索信息窗口对象的数组

            for (var index in xyResults) {
                xyResult = xyResults[index];
                if (xyResult.error != 0) { continue; } //出错就直接返回;
                point[index] = new BMap.Point(xyResult.x, xyResult.y);
                marker[index] = new BMap.Marker(point[index]);

                content[index] = '<div style="margin:0;line-height:20px;padding:2px;">' +
                    '<img src="' + _subList.Table[index].jianjieImg + '" alt="酒店图片" style="float:right;zoom:1;overflow:hidden;width:100px;height:100px;margin-left:3px;"/>' +
                    '地址:' + _subList.Table[index].address + '<br/>电话:' + _subList.Table[index].tele + '<br/>' +
                  '</div>';
                //创建检索信息窗口对象
                //var searchInfoWindow = null;
                searchInfoWindow[index] = new BMapLib.SearchInfoWindow(map, content[index], {
                    title: '<a href="/hotel/HotelDetail.aspx?sub=' + _subList.Table[index].substoreid + '" target="_blank">' + _subList.Table[index].name + '</a>',      //标题
                    width: 290,             //宽度
                    height: 105,              //高度
                    panel: "panel",         //检索结果面板
                    enableAutoPan: true,     //自动平移
                    searchTypes: [
                        BMAPLIB_TAB_SEARCH,   //周边检索
                        BMAPLIB_TAB_TO_HERE,  //到这里去
                        BMAPLIB_TAB_FROM_HERE //从这里出发
                    ]
                });
                marker[index].enableDragging(); //marker可拖拽

                //添加点击事件
                //                marker[index].addEventListener("click", function (e) {
                //                    searchInfoWindow[index].open(marker[index]);
                //                })
                //添加点击事件
                marker[index].addEventListener("click",
                    (function (k) {
                        // js 闭包
                        return function () {
                            //map.centerAndZoom(point[k], 18);
                            //marker[k].openInfoWindow(info[k]);
                            searchInfoWindow[k].open(marker[k]);
                        }
                    })(index)
                );
                map.addOverlay(marker[index]); //在地图中添加marker
                if (index == 0) {
                    map.setCenter(point[index]); // 由于写了这句,每一个被设置的点都是中心点的过程
                }
            }
        }

        if (_subList != "") {
            for (var i = 0; i < _subList.Table.length; i++) {
                gpsPoints.push(new BMap.Point(_subList.Table[i].lon, _subList.Table[i].lat));
            }

            setTimeout(function () {
                BMap.Convertor.transMore(gpsPoints, 0, callback);        //一秒之后开始进行坐标转换。参数2,表示是从GCJ-02坐标到百度坐标。参数0,表示是从GPS到百度坐标
            }, 1000);
        }

    } else {
        document.getElementById("allmap").style.display = "none";
        document.getElementById("img").style.display = "block";
    }
</script>
</html>

百度地图API 批量添加 带检索功能的信息窗口

百度地图API 批量添加 带检索功能的信息窗口的更多相关文章

  1. 百度地图API 重新生成点聚合的功能

    百度点聚合用来解决加载大量点要素到地图上产生覆盖现象的问题,并提高性能. http://api.map.baidu.com/library/MarkerClusterer/1.2/docs/symbo ...

  2. 百度地图API的自动定位和搜索功能(移动端)

    近期有个项目涉及到百度地图API,要求做到自动定位和搜索功能.煞费苦心的研究半天,终于能将两个功能合二为一,现将代码贴出来分享给大家,希望你们的砖搬得又快又好.注释不多,具体请参照:http://lb ...

  3. 深入浅出百度地图API开发系列(3):模块化设计

    在前面两张简单介绍了百度地图API的基础知识和使用之后,我们来分析一下百度地图API的基本架构,了解一下基本架构可以帮助我们更清晰的了解API的功能和调用过程,也就可以帮助我们在实际开发中可以更方便的 ...

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

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

  5. 吐槽贴:百度地图 api 封装 的实用功能 [源码下载]

    ZMap 类 功能介绍 ZMap 是学习百度地图 api 接口,开发基本功能后整的一个脚本类,本类方法功能大多使用 prototype 原型 实现: 包含的功能有:轨迹回放,圈画区域可编辑,判断几个坐 ...

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

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

  7. 【百度地图API】批量地址解析与批量反地址解析(带商圈数据)

    原文:[百度地图API]批量地址解析与批量反地址解析(带商圈数据) 摘要:因为地址解析的webserives方式还没有开通,所以先用JS版本的地址解析接口来批量获取地址解析数据吧,同时还能得到商圈的数 ...

  8. 【百度地图API】情人节求爱大作战——添加标注功能

    原文:[百度地图API]情人节求爱大作战--添加标注功能 任务描述: 2月2日是除夕,2月14立马来!即将到来的情人节,你想送TA一份什么礼物呢? 不如,在你们居住的地方,画个大大的桃心,表达你对TA ...

  9. 【百度地图API】如何批量转换为百度经纬度

    原文:[百度地图API]如何批量转换为百度经纬度 摘要: 百度地图API的官网上提供了常用坐标转换的示例.但是,一次只能转换一个,真的非常麻烦!!这里结合了官方的示例,自制一个批量转换工具,供大家参考 ...

随机推荐

  1. php如何查看变量是真实被引用

    $var1 = 'Hello World'; $var2 = ''; $var2 =&$var1; debug_zval_dump(&$var1); $a = "aaa&qu ...

  2. libev学习(一)

    一.libev简介 Libev是一个事件循环:你注册感兴趣的特定事件(比如一个文件可以读取时或者发生超时时),它将管理这些事件源,将这些事件反馈给你的程序.为了实现这些,至少要在你的进程(或线程)中执 ...

  3. viewport ---移动端详解

    转自---http://www.cnblogs.com/2050/p/3877280.html 移动前端开发之viewport的深入理解 在移动设备上进行网页的重构或开发,首先得搞明白的就是移动设备上 ...

  4. 什么是Mbps、Kbps、bps、kb、mb及其换算和区别

    Mbps 即 Milionbit pro second(百万位每秒): Kbps 即 Kilobit pro second(千位每秒): bps 即 bit pro second(位每秒): 速度单位 ...

  5. 原生JS实现瀑布流

    浏览网页的时候经常会遇到瀑布流布局的网站.也许有些读者不了解瀑布流.瀑布流,又称瀑布流式布局.是比较流行的一种网站页面布局,视觉表现为参差不齐的多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数 ...

  6. [原创]java WEB学习笔记85:Hibernate学习之路-- -映射 一对一关系 ,基于主键方式实现

    本博客的目的:①总结自己的学习过程,相当于学习笔记 ②将自己的经验分享给大家,相互学习,互相交流,不可商用 内容难免出现问题,欢迎指正,交流,探讨,可以留言,也可以通过以下方式联系. 本人互联网技术爱 ...

  7. Chapter 3: Connector(连接器)

    一.概述 Tomcat或者称之为Catalina(开发名称),可以简化为两个主要的模块,如下图: 多个Connector关联一个Container.之所以需要多个Connector,是为了处理多种协议 ...

  8. 支持https请求以及https请求的抓包

    iOS9推出的时候,苹果希望大家使用https协议,来提高数据传输之间的安全性.下面我就从最简单的代码介绍,如何在工程中设置,来支持https的请求. 一.证书准备篇 1.证书转换 在服务器人员,给你 ...

  9. fiddler了解

    常常听到有人会所抓包什么的,自己电脑上有一段fiddler软件,但是一直没有使用,因为不了解.今天终于看视频,看博客,大致了解了fiddler这个软件,看着是非常强大啊.那么fiddler到底是什么, ...

  10. python学习day3

    目录: 1.集合set 2.计数器 3.有序字典 4.默认字典 5.可命名元组 6.队列 7.深浅拷贝 8.函数 9.lambda表达式 10.内置函数 一.集合set set是一个无序且不重复的元素 ...