<!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. linux下python调用c模块

    在C调用Python模块时需要初始化Python解释器,导入模块等,但Python调用C模块却比较简单,下面还是以helloWorld.c 和 main.py 做一说明:   (1)编写C代码,hel ...

  2. Git基础知识与常用命令

    一:相关概念: 1:工作区(Working Directory): 就是你在电脑里能看到的目录 2:版本库(Repository): 工作区有一个隐藏目录.git,这个不算工作区,而是Git的版本库. ...

  3. Facade设计模式

    Facade模式 Facade模式要求一个子系统的外部与其内部的通信必须通过一个统一的Facade对象进行.Facade模式提供一个高层次的接口,使得子系统更易于使用. 就如同医院的接待员一样,Fac ...

  4. JavaScript中关于时间的知识点

    1.计算时间差,天数,小时数,余数 var begintime_ms = Date.parse(new Date(begintime.replace(/-/g, "/"))); / ...

  5. NPOI 导入导出excel 支持 03 07

    因为微软的office成本太高了,所以开发项目的时候电脑上没安装office,而是安装了wps.但开发语言用的是C#,所以直接调用微软的office组件是很方便的,但一方面慢,一方面成本高,所以从网上 ...

  6. windows 8.1 下蓝屏报错：SYSTEM_SERVICE_EXCEPTION(NETIO.SYS)的解决办法

         大概2周前,电脑突然蓝屏了,我上网查了一下解决办法,因为大部分内容是英文的,所以我只大概看了下,看到这个问题好像是由于软件冲突造成的,于是就把小红伞去掉了,而那天电脑也真的没有再蓝屏(之前大 ...

  7. 如何优化sql语句

    1. 首先要搞明白什么叫执行计划? 执行计划是数据库根据SQL语句和相关表的统计信息作出的一个查询方案,这个方案是由查询优化器自动分析产生的,比如一条SQL语句如果用来从一个 10万条记录的表中查1条 ...

  8. php框架制做笔记

    在学习完基础之后,最好的提高方式是做一个自己的框架,因为框架会用到各个知识点,在制做过程中,复习,巩固,提高. 在框架中,因为是单入口,整个脚本运行时都存在的变量我们应该设为静态变量,这样它在每个地方 ...

  9. RHEL7学习之ISCSI配置

    ISCSI服务器:192.168.10.10 ISCSI客户端:192.168.10.20 在ISCSI服务器添加两块硬盘:/dev/sdb /de/sdc 一,在服务端安装 [root@localh ...

  10. RHEL7学习之crontab无法执行ntpdate

    1,"/etc/crontab"文件 [root@localhost ~]# more /etc/crontab SHELL=/bin/bash PATH=/sbin:/bin:/ ...