<!DOCTYPE html>

<html>

<head>

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

    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

    <style type="text/css">

        body, html {width: 100%;height: 100%;margin:0;font-family:"微软雅黑";}

        #allmap{width:100%;height:500px;}

        p{margin-left:5px; font-size:14px;}

    </style>

    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=m5OhArNG9qxL8sFRUceqCsnRnktYknGQ"></script>

    <title>添加复杂内容的信息窗口</title>

</head>

<body>

<div id="allmap"></div>

</body>

</html>

<script type="text/javascript">

    // 百度地图API功能

    var sContent =

        "<h4 style='margin:0 0 5px 0;padding:0.2em 0'>服务热线</h4>" +

        "<img style='float:right;margin:4px' id='imgDemo' src='2.jpg' width='139' height='104' title='天安门'/>" +

        "<p style='margin:0;line-height:1.5;font-size:13px;text-indent:2em'>010-58405785</p>" +

        "</div>";

    var map = new BMap.Map("allmap");

    var point = new BMap.Point(116.306406,40.049256);

    var marker = new BMap.Marker(point);

    var infoWindow = new BMap.InfoWindow(sContent);  // 创建信息窗口对象

    map.centerAndZoom(point, 25);

    map.addOverlay(marker);

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

        this.openInfoWindow(infoWindow);

        //图片加载完毕重绘infowindow

        document.getElementById('imgDemo').onload = function (){

            infoWindow.redraw();   //防止在网速较慢，图片未加载时，生成的信息框高度比图片的总高度小，导致图片部分被隐藏

        }

    });

</script>

百度api的使用的更多相关文章

  1. 百度API ； 很多有用的接口及公用 数据

    百度API : http://apistore.baidu.com/ . 比如手机号码:

  2. 去百度API的百度地图准确叠加和坐标转换的解决方案研究

    文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 1.背景 目前项目上如果要使用百度地图,得加载百度的开发包,然后通过百 ...

  3. 利用百度API Store接口进行火车票查询

    火车票查询 项目源码下载链接: Github:https://github.com/VincentWYJ/TrainTicketQuery 博客文件:http://files.cnblogs.com/ ...

  4. 百度api短信开发

    公司原来有一个短信发送的功能,是调用第三方的,但是很不稳定,时不时就收不到短信,但是钱已经扣了.对于这样的事,谁都忍受不了的.于是想找一个稳定短信发送平台,第一想到的是阿里云,百度.在这两个平台上公司 ...

  5. html5获取经纬度，百度api获取街区名，并使用JS保存进cookie

    引用js<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak= ...

  6. 百度API使用--javascript api进行多点定位

    使用百度地图提供的javascript api,给定多点的经纬度坐标,在百度地图上 显示这些坐标点. 其中包括各个点自适应地图显示,自定义坐标点的图标,以及各个点之间添加折线. 实现的效果如下图: 具 ...

  7. PHP学习笔记：利用百度api实现手机归属地查询

    从来没有用过api,都不知道怎么获得api的数据,跟着demo,然后修改,终于实现了手机号码查询的功能,代码和说明很全,大家试试. <?php /** * Created by jianqing ...

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

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

  9. 【转】百度API获取城市名地名(附源码)

    在做一个软件时,用到了定位功能.网上有很多关于google 的GPS定位,但网上关于google定位都没有用, 搜索下原因:(这里建议大家在中国就尽量不使用系统自带的定位) 因为Google的服务器不 ...

  10. HTML5根据浏览器获取经度和纬度（百度API）

    网页获取用户位置信息的办法1 调用百度地图的地图标注功能,通过百度地图API获取对应的经度和纬度进而获取地区信息 优点是比较准确,缺点是需要用户自己选择位置2 通过H5 geolocation属性获取 ...

随机推荐

  1. Python自然语言处理学习笔记之评价（evaluationd）

    对模型的评价是在test set上进行的,本文首先介绍测试集应该满足的特征,然后介绍四种评价方法. 一.测试集的选择 1.首先,测试集必须是严格独立于训练集的,否则评价结果一定很高,但是虚高,不适用于 ...

  2. 修改本地配置远程连接oracle数据库

    当我们需要查看数据库信息时,我们更愿意通过客户端来查看,这样不仅操作方便,而且查看更精准.那么需要远程连接数据库需要在本地修改那些配置呢?以下是我个人的经验,希望大家都指正. 1.在oracle安装目 ...

  3. PLSQL游标使用

    游标是一个指针,它指向一块SQL区域,该区域用于存储处理过来的SELECT或者其他的DML操作返回的数据.由PLSQL创建并管理的游标成为隐式游标,用户创建并管理的成为显示游标.游标可以看做是指向记录 ...

  4. find查找命令

    find # 格式 find [路径] [参数] [表达式] -exec 指令 {} \ ; -{} 代表find找到的文件 -\ 禁止转意 : 表示本行指令结束 # find /sbin -type ...

  5. IE浏览器和CSS盒模型

    网页设计中常听的属性名:内容(content).填充(padding).边框(border).边界(margin), CSS盒子模式都具备这些属性. 盒子模型是CSS中一个重要的概念,理解了盒子模型才 ...

  6. Vim进阶命令

    1. 查找    /xxx(?xxx)       表示在整篇文档中搜索匹配xxx的字符串, / 表示向下查找, ? 表示                    向上查找.其中xxx可以是正规表达式, ...

  7. SQL Server 2008R2 企业版 百度云下载地址

    SQL Server 2008R2 (百度云下载地址:链接: http://pan.baidu.com/s/1mi34II8 密码: yc1w)   ASP.NET MVC4.0+ WebAPI+Ea ...

  8. MongoDB的安装及恢复

    在http://www.mongodb.org/display/DOCS/Downloads 下载对应版本 mongodb 安装数据库 解压文档,复制到c盘,改名为mongodb 新建文件夹c:/da ...

  9. angular : $eval & $timeout

    $digest: function() { var watch, value, last, watchers, length, dirty, ttl = TTL, next, current, tar ...

  10. Java表达式中的那些坑

    [1]您确定真正了解后缀表达式与前缀表达式的区别吗? public class IncrementDemo{ public static void main(String[] args) { int ...