<!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. 【转】MySQL连接超时断开的问题

      这遍文章转过来做个笔记,时不时看看. 转:http://blog.csdn.net/nethibernate/article/details/6658855 Exception如下: org.hi ...

  2. Win10下Android studio配置

    Win10下Android studio配置 一.安装Android Studio的准备工作 1.下载好JDK,去官网上找一个下载下来 2.安装JDK.并配置环境变量.安装过程:本人将使用的是jdk- ...

  3. Xcode中给控件添加颜色时自动显示出颜色

    在iOS开发中,给一些控件设置颜色的时候,设置完不能立马看到颜色.必须要运行程序之后才能看到设置的颜色,如果颜色有偏差再回代码改参数,然后再运行看颜色很是麻烦.令人高兴得是Xcode有很多功能强大插件 ...

  4. Spring环境搭建之：导入jar包、配置文件名称及放置位置

    Spring环境搭建之:导入jar包.配置文件名称及放置位置 现在项目开发中spring框架应用的还是比较多的,自己用的还不太熟练,每次用的时候总配置半天,总有些配置弄错,就找个时间总结以下,方便以后 ...

  5. mysql定时器Events

    MySQL定时器Events 一.背景 我们MySQL的表A的数据量已经达到1.6亿,由于一些历史原因,需要把表A的数据转移到一个新表B,但是因为这是线上产品,所以宕机时间需要尽量的短,在不影响数据持 ...

  6. 手把手写php框架中三大“自动功能”

    在很多php框架中都有自动过滤,自动填充,自动验证等三大自动功能,用来对POST表单传过来的数据进行加工,以便能够更加规范的导入数据库.这一功能在添加商品,添加商品分类中有很大的用处.比如thinkp ...

  7. JSP内置对象有哪些呢？

    内置对象 request request 对象是 javax.servlet.httpServletRequest类型的对象. 该对象代表了客户端的请求信息,主要用于接受通过HTTP协议传送到服务器的 ...

  8. 纯脚本组装Json格式字符串

    var answerStr = "["; for (var i in answer) { var data = $("input[name=QuestionItem_&q ...

  9. Cracking-- 17.13 将二叉树转换成双向链表

    在书的105页 使用中根遍历的思想 left 之后 为 root 之后 为 right 则对左子树来说 left->right = root; root->left = left; 对右子 ...

  10. python 跨模块实现按照文件大小，日期实现日志分割，反转

    笔者的一个自动化测试平台项目,采用了python作为后端服务器语言.项目基于快速成型目的,写了一个极其简陋的日志记录功能,支持日志记录到文件和支持根据日志级别在终端打印不同颜色的log.但随着测试平台 ...