<!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的经历，怎样为多个点添加带检索功能的信息窗口

    不管我们要做什么样的效果,APIKey(密钥)都是不可缺少的要件,所以我们需要先去百度申请我们的APIKey!!! 伸手党,请直接到页面底部获取完整代码! 最近做一个门店查询的内容展示,考虑到用户直观 ...

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

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

  3. 百度地图API的自动定位和搜索功能（移动端）

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

  4. 百度地图总结第二篇--POI检索功能

    简单介绍: 眼下百度地图SDK所集成的检索服务包含:POI检索.公交信息查询.线路规划.地理编码.行政区边界数据检索.在线建议查询.短串分享(包含POI搜索结果分享.驾车/公交/骑行/步行路线规划分享 ...

  5. 百度地图api使用，简单搜索+经纬度定位+自定义消息窗口

    <html> <head> <meta http-equiv="Content-Type" content="text/html; char ...

  6. Python利用百度地图api批量获取地址经纬度

    1.pip安装xlrd,xlwt,requests模块. 2.在工程目录处放置地点Excel文件. python2.7.13代码: #coding:utf-8 import xlrd import x ...

  7. 深入浅出百度地图API开发系列（3）：模块化设计

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

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

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

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

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

随机推荐

  1. AC日记——二叉堆练习3 codevs 3110

    3110 二叉堆练习3  时间限制: 3 s  空间限制: 128000 KB  题目等级 : 黄金 Gold 题解       题目描述 Description 给定N(N≤500,000)和N个整 ...

  2. 前端之web上传文件的方式

    前端之web上传文件的方式 本节内容 web上传文件方式介绍 form上传文件 原生js实现ajax上传文件 jquery实现ajax上传文件 form+iframe构造请求上传文件 1. web上传 ...

  3. 每天成长一点---WEB前端学习入门笔记

    WEB前端学习入门笔记 从今天开始,本人就要学习WEB前端了. 经过老师的建议,说到他每天都会记录下来新的知识点,每天都是在围绕着这些问题来度过,很有必要每天抽出半个小时来写一个知识总结,及时对一天工 ...

  4. common-pool2 学习：thrift连接池的另一种实现

    对象池是一种很实用的技术,经典的例子就是数据库连接池.去年曾经从零开始写过一个thrift客户端连接池.如果不想重造轮子,可以直接在apache开源项目commons-pool的基础上开发. 步骤: ...

  5. mysql中间件atlas配置使用

    MySQL所在机器: 192.168.16.70(Master) 192.168.16.74(Slave)      192.168.16.72(atlas)注意:主从复制需要自行配置atlas配置使 ...

  6. django自带加密模块的使用

    首先,引入模块:  代码如下 复制代码 >>> from django.contrib.auth.hashers import make_password, check_passwo ...

  7. sql三维数据

    今天有个钢铁项目在导入数据时 存货规格各种缺 相吐血 原表结构是这样的 编码.规格.名称 三种存货 三种都有想同的规格 规格对分厚度和宽度 那么问题来了 简简单单的几个厚度宽度 三种商品 就到了 10 ...

  8. 常用js归纳

    一.获取地址栏参数 /*根据name获取URL参数*/ function getQueryString(name) { var reg = new RegExp("(^|&)&quo ...

  9. FFT 快速傅里叶变换浅析

    终于补完坑了哈哈哈 这个东西很神奇,看了半天网上的解释和课件,研究了很长时间,算是大概明白了它的原理. 话不多说先上图. 我们要求的h(x)=f(x)*g(x),f(x)=Σai*x^i,g(x)=Σ ...

  10. java 方法

    方法命名规范要求 类的命名规范:“全部单词的 首字母必须大写”.那么在定义方法的时候也是有命名规范要求的:“第 一个单词的首字母小写,之后每个单词的首字母大写”,那么这就是方法 的命名规范. 递归调用 ...