<!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. 2016CCPC 合肥--最大公约数//每一年通向它的路上，多少人折戟沉沙，多少人功败垂成，有人一战成名，有人从头再来。

    有这样一个有关最大公约数的函数:函数 f(x, y): { c=0 当 y>0: { c +=1 t = x % y x = y y = t } 返回 c * x * x} 给出三个正整数n,m ...

  2. C#中线程对控件的访问

    Control类提供了一个Invoke方法来给子线程访问主线程的控件,它的原型是酱紫的: object.Control.Invoke(Delegate method); object.Control. ...

  3. 交易B（队列）

    临近考试,又把之前的上机的题目看了一遍,自己又尝试着敲代码,发现好多之前的代码现在看来都被自己复杂化了许多,于是把现在重写的代码再贴出来. 之前的题目和代码戳这里 #include<queue& ...

  4. c语言选择排序

    简单选择排序是经常用到的一种排序算法. 原理: 1．简单选择排序一句话概括:每次选择无序数列中最小的将其放在有序数列的最后. 2．在简单选择排序中,我们用初始化的数字int a[6]={2,5,6,3 ...

  5. zabbix3.0 安装Tips

    原文转自:http://www.cnblogs.com/tae44/p/4812190.html#3270843 此处只能留空,否则,提示安装无法进行!!

  6. coredump

    COREDUMP调试的使用 一,什么是coredump 跑程序的时候经常碰到SIGNAL 或者 call trace的问题,需要定位解决,这里说的大部分是指对应程序由于各种异常或者bug导致在运行过程 ...

  7. IntelliJ 支持web

  8. LXD 2.0 系列（四）：资源控制

    LXD 提供了各种资源限制.其中一些与容器本身相关,如内存配额.CPU 限制和 I/O 优先级.而另外一些则与特定设备相关,如 I/O 带宽或磁盘用量限制.-- Stéphane Graber 本文导 ...

  9. Use Apache HttpClient to Post json data

    import org.apache.commons.io.IOUtils;import org.apache.http.HttpResponse;import org.apache.http.clie ...

  10. SVN使用总结

    ## 常用命令 建立分支 --- svn copy/cp svn cp http://example.com/repos/myproject/trunk http://example.com/repo ...