<!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. 【总结】清除webbrowser cookie/session的6种方法

    下面是我测试下来的6种清除webbrowser中cookie的6种方法: //方法一:调用 wininet.dll清除cookie (推荐) SuppressWininetBehavior(); // ...

  2. Java使用正则表达式取网页中的一段内容(以取Js方法为例)

    关于正则表达式: 表1.常用的元字符 代码 说明 . 匹配除换行符以外的任意字符 \w 匹配字母或数字或下划线或汉字 \s 匹配任意的空白符 \d 匹配数字 \b 匹配单词的开始或结束 ^ 匹配字符串 ...

  3. linux中的chage命令

    在LINUX系统上,密码时效是通过chage命令来管理的. 参数说明:-m 过多少天后可修改密码.为0时代表任何时候都可以更改密码.-M 过多少天后密码过期.-W 用户密码到期前,提前收到警告信息的天 ...

  4. Window 命令

    tracert XXX.XXX.XXX.XXX 路由追踪命令,可以显示到目的IP所经过的路由    

  5. 百度自动发贴，登录很顺利的模拟实现，但发贴攻关失败，能力有限，追JS过程中颇为痛苦

    攻关失败,且短期内看不到希望,看不到方向,且越来越焦急,目前已知的是,用根据用户的鼠标事件以一定的规则结合其他数据,服务器以这些数据验证是否为真正的手动发贴. 不过闲暇时实现了百度贴吧的自动签到. 较 ...

  6. Ubuntu15下mysql5.6.25解决不支持中文的办法

    apt-get install 安装的,不是源码包安装的mysql 1 修改mysql的配置文件 /etc/mysql/conf.d/mysql.cnf 在[mysql]的下方加入如下语句:(注:这个 ...

  7. python获取命令行变量

    python获取命令行参数的方法是,开头使用import sys, 后面用sys.argv[0]表示文件名,sys.argv[1],sys.argv[2]...表示后续命令行参数. 注意,sys.ar ...

  8. ASP.NET MVC3 Model验证总结

    ASP.NET MVC3中的Model是自验证的,这是通过.NET4的System.ComponentModel.DataAnnotations命名空间完成的. 我们要做的只是给Model类的各属性加 ...

  9. odoo模块

    odoo模块包括 业务对象,web控制器,数据文件,前面2个是Python模块,而数据文件则是odoo特有的文件,例如,odoo数据文件,web数据.这些数据文件在 __odoo__.py 进行定义, ...

  10. 一点一滴学shell

    1. 获取shell脚本的名称 ${BASH_SOURCE-$0} 2. 获取shell脚本的路径 dirname "${BASH_SOURCE-$0}" 这个路径不一定是脚本的真 ...