<!DOCTYPE html>

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

 <head>

     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

     <style type="text/css">

         body, html {

             width: %;

             height: %;

             overflow: hidden;

             margin: ;

         }

         #allmap {

             height: %;

             overflow: hidden;

         }

     </style>

     <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=yqYfrk8ClmehOV743RST9c8Z"></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>SearchInfoWindow</title>

 </head>

 <body>

     <div id="allmap" style="overflow:hidden;zoom:1;position:relative;">

         <div id="map" style="height:100%;-webkit-transition: all 0.5s ease-in-out;transition: all 0.5s ease-in-out;"></div>

     </div>

     <script type="text/javascript">

         // 百度地图API功能

         var map = new BMap.Map('map');

         var poi = new BMap.Point(116.307852, 40.057031);

         map.centerAndZoom(poi, );

         map.enableScrollWheelZoom();

         var content = '<div style="margin:0;line-height:20px;padding:2px;">' +

                         '<img src="/image/logo.png" alt="" style="float:right;zoom:1;overflow:hidden;width:100px;height:100px;margin-left:3px;"/>' +

                         '地址：北京市海淀区上地十街10号<br/>电话：(010)59928888<br/>简介：百度大厦位于北京市海淀区西二旗地铁站附近，为百度公司综合研发及办公总部。' +

                       '</div>';

         //创建检索信息窗口对象

         var searchInfoWindow = null;

         searchInfoWindow = new BMapLib.SearchInfoWindow(map, content, {

             title: "百度大厦",      //标题

             width: ,             //宽度

             height: ,              //高度

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

             enableAutoPan: true,     //自动平移

             searchTypes: [

                 BMAPLIB_TAB_SEARCH,   //周边检索

                 BMAPLIB_TAB_TO_HERE,  //到这里去

                 BMAPLIB_TAB_FROM_HERE //从这里出发

             ]

         });

         var marker = new BMap.Marker(poi); //创建marker对象

         marker.enableDragging(); //marker可拖拽

         marker.addEventListener("click", function (e) {

             searchInfoWindow.open(marker);

         })

         map.addOverlay(marker); //在地图中添加marker

         searchInfoWindow.open(marker); //在marker上打开检索信息串口

         $("close").onclick = function () {

             searchInfoWindow.close();

         }

         $("open").onclick = function () {

             var enableSendToPhone = false;

             if ($("enableSendToPhone").checked) {

                 enableSendToPhone = true;

             }

             searchInfoWindow = new BMapLib.SearchInfoWindow(map, content, {

                 title: "百度大厦",      //标题

                 width: ,             //宽度

                 height: ,              //高度

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

                 enableAutoPan: true,     //自动平移

                 enableSendToPhone: enableSendToPhone, //是否启用发送到手机

                 searchTypes: [

                     BMAPLIB_TAB_SEARCH,   //周边检索

                     BMAPLIB_TAB_TO_HERE,  //到这里去

                     BMAPLIB_TAB_FROM_HERE //从这里出发

                 ]

             });

             if ($("enableAutoPan").checked) {

                 searchInfoWindow.enableAutoPan();

             } else {

                 searchInfoWindow.disableAutoPan();

             };

             searchInfoWindow.open(marker);

         }

         $("show").onclick = function () {

             searchInfoWindow.show();

         }

         $("hide").onclick = function () {

             searchInfoWindow.hide();

         }

         $("getPosition").onclick = function () {

             var position = searchInfoWindow.getPosition();

             alert("经度：" + position.lng + "；纬度：" + position.lat);

         }

         $("setValue").onclick = function () {

             searchInfoWindow.setPosition(new BMap.Point($("lng").value, $("lat").value));

             searchInfoWindow.setTitle($("title").value);

             searchInfoWindow.setContent($("content").value);

         }

         $("getContent").onclick = function () {

             alert(searchInfoWindow.getContent());

         }

         $("getTitle").onclick = function () {

             alert(searchInfoWindow.getTitle());

         }

         function $(id) {

             return document.getElementById(id);

         }

         //样式1

         var searchInfoWindow1 = new BMapLib.SearchInfoWindow(map, "信息框1内容", {

             title: "信息框1", //标题

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

             enableAutoPan: true, //自动平移

             searchTypes: [

                 BMAPLIB_TAB_FROM_HERE, //从这里出发

                 BMAPLIB_TAB_SEARCH   //周边检索

             ]

         });

         function openInfoWindow1() {

             searchInfoWindow1.open(new BMap.Point(116.319852, 40.057031));

         }

         //样式2

         var searchInfoWindow2 = new BMapLib.SearchInfoWindow(map, "信息框2内容", {

             title: "信息框2", //标题

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

             enableAutoPan: true, //自动平移

             searchTypes: [

                 BMAPLIB_TAB_SEARCH   //周边检索

             ]

         });

         function openInfoWindow2() {

             searchInfoWindow2.open(new BMap.Point(116.324852, 40.057031));

         }

         //样式3

         var searchInfoWindow3 = new BMapLib.SearchInfoWindow(map, "信息框3内容", {

             title: "信息框3", //标题

             width: , //宽度

             height: , //高度

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

             enableAutoPan: true, //自动平移

             searchTypes: [

             ]

         });

         function openInfoWindow3() {

             searchInfoWindow3.open(new BMap.Point(116.328852, 40.057031));

         }

         var isPanelShow = false;

         //显示结果面板动作

         $("showPanelBtn").onclick = function () {

             if (isPanelShow == false) {

                 isPanelShow = true;

                 $("showPanelBtn").style.right = "300px";

                 $("panelWrap").style.width = "300px";

                 $("map").style.marginRight = "300px";

                 $("showPanelBtn").innerHTML = "隐藏检索结果面板<br/>>";

             } else {

                 isPanelShow = false;

                 $("showPanelBtn").style.right = "0px";

                 $("panelWrap").style.width = "0px";

                 $("map").style.marginRight = "0px";

                 $("showPanelBtn").innerHTML = "显示检索结果面板<br/><";

             }

         }

     </script>

 </body>

 </html>

详细实例请参考百度api

百度地图api（摘自百度）的更多相关文章

  1. 【百度地图API】百度API卫星图使用方法和卫星图对比工具

    原文:[百度地图API]百度API卫星图使用方法和卫星图对比工具 百度地图API推出卫星图接口也有一个月啦~ 本文除了介绍如何使用百度地图API来操作卫星图外,还顺带制作了个卫星图对比工具. 一.百度 ...

  2. 通过百度地图API将百度坐标转换成GPS经纬度

    百度地图API链接:http://developer.baidu.com/map/index.php?title=webapi/guide/changeposition 百度地图API中,有GPS坐标 ...

  3. 【Android接百度地图API】百度地图Demo点击按钮闪退

    运行百度地图自带的BaiduMap_AndroidSDK_v4.1.0_Sample里面的BaiduMapsApiASDemo发现点击上面的按钮会闪退,控制台报的是xml的问题 查了一下,官方文档特别 ...

  4. 百度地图API简单应用

    在做移动端应用时经常用到百度地图API,百度API有强大的示例和文档,开发之前去百度相关网站注册密钥,很块博主只花了几分钟 百度地图API范例 百度地图API文档说明 例子1:输入特定关键字绘制地图标 ...

  5. 百度地图API自定义地图

    http://api.map.baidu.com/lbsapi/creatmap/index.html http://developer.baidu.com/map/index.php?title=w ...

  6. 百度地图API开发指南

    简介什么是百度地图API? 百度地图API是一套由JavaScript语言编写的应用程序接口,它能够帮助您在网站中构建功能丰富.交互性强的地图应用.百度地图API包含了构建地图基本功能的各种接口,提供 ...

  7. Android端百度地图API使用详解

    百度地图API简介 百度地图移动版API(Android)是一套基于Android设备的应用程序接口,通过该接口,可以轻松的访问百度服务和数据,构建功能丰富.交互性强的地图应用程序. 百度地图移动版A ...

  8. 百度地图API调用实例之地址标注与位置显示

    之前弄了个谷歌地图API标注的调用实例,后来要求改成百度地图. 感谢主,通过网上资料(百度地图API,百度地图API详解之地图标注)收集及研究, 终于把百度地图标注和显示功能实现出来了,具体实现方法如 ...

  9. 网页嵌入百度地图和使用百度地图api自定义地图的详细步骤

    在网页中插入百度地图 如果想在自己的网页上面加入百度地图的话,可以用百度地图的api.具体使用方法如下: 第一步:进入百度创建地图的网站http://api.map.baidu.com/lbsapi/ ...

  10. 【百度地图API】如何调整结果面板的样式？如何获取指定页码的结果？

    原文:[百度地图API]如何调整结果面板的样式?如何获取指定页码的结果? 摘要: 1.你是否想自定义查询后,结果面板的显示样式? 2.数据接口每次只返回10条结果,如何取到单独每一页的结果? ---- ...

随机推荐

  1. oracle exp imp 导入 正在跳过表 plsql 导入表 成功终止 数据 被导入

    http://blog.csdn.net/agileclipse/article/details/12968011 .导入过程中,所有表导入都出现提示, 正在跳过表...某某表名 最后提示成功终止导入 ...

  2. 去除inline-block元素间间距的N种方法

    这篇文章发布于 2012年04月24日,星期二,22:38,归类于 css相关. 阅读 147771 次, 今日 52 次 by zhangxinxu from http://www.zhangxin ...

  3. Python模块：itertools

    itertools模块:循环器 一,无穷循环器:count,cycle,repeat (1)count(5,3) #从5开始的整数循环器,每次增加3,即:5,8,11,14,17... from it ...

  4. android ListView点击item返回后listview滚动位置

    1.Don't work when dynamically loading content Parcelable state; @Override public void onPause() { // ...

  5. Shell文本处理 - 匹配与编辑

    正则表达式 符号 含义 . 匹配任意ASCII中任意单个字符,或是字母,或是数字 ^ 匹配行首 $ 匹配行尾 * 匹配任意字符或前一个的一次或多次重复 \ 转义,被转义的有$ . ‘ “ * [ ] ...

  6. php的cookie和session相同主域名共享

    如何使用chrome查看cookie和session详见另一篇文章,点这里 首先说cookie, $cookieDomain = '.elf.com'; setcookie('elf', 'im el ...

  7. AC算法 及python实现

    零 导言 软件安全课上,老师讲了AC算法,写个博客,记一下吧. 那么AC算法是干啥的呢? ——是为了解决多模式匹配问题.换句话说,就是在大字符串S中,看看小字符串s1, s2,...有没有出现. AC ...

  8. hdoj 1596 find the safest rode

    Problem Description XX星球有很多城市,每个城市之间有一条或多条飞行通道,但是并不是所有的路都是很安全的,每一条路有一个安全系数s,s是在 0 和 1 间的实数(包括0,1),一条 ...

  9. CAD 二次开发----- 块（一）

    1.块定义与块参照两个概念 块定义类似于模具,而块参照类似于模具浇筑出来的模型,在图形中只需用块定义来保存块的实际几何组成,而仅用插入点和比例因子来存储块定义,因为块参照的几何形状与快参照完全一样,仅 ...

  10. ArcGIS Server 10 Java 版的Rest服务手动配置方法

    Java版的Manager中发布的服务默认只发布了该服务的SOAP接口,而REST接口需要用户在信息服务器,如Tomcat. Apache.WebLogic等中手工配置.由于在Java版的Server ...