<!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. redisson实现分布式锁原理

    *:first-child { margin-top: 0 !important; } body>*:last-child { margin-bottom: 0 !important; } /* ...

  2. 【前端】:HTML

    前言: 最近开始学前端了,这篇博客主要介绍html的一些主要标签,写完这篇博客,我会用刚学的html做一个简单的登陆界面~~ 一.HTML介绍 HTML(Hyper Text Mark-up Lang ...

  3. fir.im Weekly - 可能是 2017 最好的 Swift 学习资源

    春节假期刚结束,一大批新鲜干货就来了.@故胤道长 分享了一份开源 Swift30 Projects ,内含 30 个小App,更新至 Swift 3.0,目前更迭的这个版本更注重代码规范和架构设计,且 ...

  4. 自动化CodeReview - ASP.NET Core请求参数验证

    自动化CodeReview系列目录 自动化CodeReview - ASP.NET Core依赖注入 自动化CodeReview - ASP.NET Core请求参数验证 参数验证实现 在做服务端开发 ...

  5. 小米wifi局域网下播放硬盘影片使用方法

    因为家里没开网,看视频都要缓存到手机上. 后来听说小米wifi可以做为一个局域网服务器来用,没忍住就买了一个. 但是下载app之后才发现被坑. 小米路由器需要登录帐号之后才可以使用,而且每次开启都要登 ...

  6. beautifulsoup 获取a(tag)的属性href

    一开始使用使用attrs(“href”) 出现错误TypeError: 'dict' object is not callable 由于attrs字典类型 atrrs["href" ...

  7. OOP面向对象三大特点

    OOP面向对象三大特点 (一)封装:将现实中一个事物的属性和功能集中定义在一个对象中.(创建对象) 创建对象的3种方式: 1.直接量方式:(创建一个单独的对象) var obj={ 属性名:值,    ...

  8. JavaScript中国象棋程序（3） - 电脑自动走棋

    "JavaScript中国象棋程序" 这一系列教程将带你从头使用JavaScript编写一个中国象棋程序.这是教程的第3节. 这一系列共有9个部分: 0.JavaScript中国象 ...

  9. MINIDVD

    import java.util.*; public class MiniDVD { public static void main(String[] args){ //扫描器 Scanner inp ...

  10. Windows内存管理简介：

    1:连续的内存空间分配: (1)单一连续分配:只能单作业,单任务运行: 分为系统和用户区:用户区是指除了系统需外左右的内存,由于单用户,单任务,要不都被占用,要不全空   (2):固定空间分配:固定分 ...