刚刚工作的时候写过百度地图API文档，那时候没有记录到技术博客里面，今天在群里看见有个姑娘在问这个问题，重温了一遍，这个API还算好用。百度地图API，集成简单好用，全面，兼容问题，文档全面；

官方文档：
http://lbsyun.baidu.com/jsdemo.htm#d0_1

选择百度地图的一个很重要的原因是百度地图支持离线地图,开发者发布App前可以将离线地图数据包提前打包到App中,或者让用户自己导入。不过目前百度的离线地图只有普通地图样式,还没有卫星地图。

官方demo的使用

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5.     <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
  6.     <style type="text/css">
  7.         body, html {width: 100%;height: 100%;margin:0;font-family:"微软雅黑";}
  8.         #allmap{width:100%;height:500px;}
  9.         p{margin-left:5px; font-size:14px;}
  10.     </style>
  11.     <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=2yj0orPscf4IFIGVG2nrlYRFrGNYozAh"></script>
  12.     <title>纯文本的信息窗口</title>
  13. </head>
  14. <body>
  15.     <div id="allmap"></div>
  16.     <p>点击标注点，可查看由纯文本构成的简单型信息窗口</p>
  17. </body>
  18. </html>
  19. <script type="text/javascript">
  20.     // 百度地图API功能
  21.     var map = new BMap.Map("allmap");
  22.     var point = new BMap.Point(116.417854,39.921988);
  23.     var marker = new BMap.Marker(point);  // 创建标注
  24.     map.addOverlay(marker);              // 将标注添加到地图中
  25.     map.centerAndZoom(point, 15);
  26.     var opts = {
  27.       width : 200,     // 信息窗口宽度
  28.       height: 100,     // 信息窗口高度
  29.       title : "海底捞王府井店" , // 信息窗口标题
  30.       enableMessage:true,//设置允许信息窗发送短息
  31.       message:"亲耐滴，晚上一起吃个饭吧？戳下面的链接看下地址喔~"
  32.     }
  33.     var infoWindow = new BMap.InfoWindow("地址：北京市东城区王府井大街88号乐天银泰百货八层", opts);  // 创建信息窗口对象
  34.     marker.addEventListener("click", function(){
  35.         map.openInfoWindow(infoWindow,point); //开启信息窗口
  36.     });
  37. //关注「编程微刊」公众号 ，在微信后台回复「领取资源」，获取IT资源200G干货大全。公众号回复“1”，拉你进程序员技术讨论群
  38. </script>

体验入口

http://www.intmote.com/11.html

关于密钥问题

在官方API里面，密钥是没有设置的，需要自己手动添加

  1. <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>

百度地图API密匙申请方法:
https://jingyan.baidu.com/article/e73e26c0b5b75124adb6a786.html

申请平台：可以访问如下网址了解如何获取有效的密钥：http://lbsyun.baidu.com/apiconsole/key#。按照步骤申请下来的api，放在代码当中就可以使用了。

原文作者：祈澈姑娘

技术博客：https://www.jianshu.com/u/05f416aefbe1

90后前端妹子，爱编程，爱运营，爱折腾。

坚持总结工作中遇到的技术问题，坚持记录工作中所所思所见，欢迎大家一起探讨交流。

百度地图API的使用示例的更多相关文章

  1. 百度地图API示例之设置级别setZoom与禁止拖拽disableDragging

    百度地图API示例之设置级别setZoom与禁止拖拽disableDragging 设置级别 <html> <head> <meta http-equiv="C ...

  2. HTML 百度地图API调用示例源码

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  3. 百度地图API示例之移动地图

    级别为6 级别为8 级别为12 代码: <!DOCTYPE html> <html> <head> <meta http-equiv="Conten ...

  4. 百度地图API示例之根据城市名设置地图中心点

    代码: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" con ...

  5. 百度地图API示例之设置地图最大、最小级别

    代码 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" cont ...

  6. 百度地图API示例之设置地图显示范围

    代码 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" cont ...

  7. 百度地图API示例之添加/删除工具条、比例尺控件

    代码 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" cont ...

  8. 百度地图API示例之添加定位相关控件

    代码 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" cont ...

  9. 百度地图API 简单示例

    百度地图API2.0需要申请AK javascript引用百度地图API 设置地图DIV样式 javascript设置地图DIV 如下图代码: <!DOCTYPE html> <ht ...

随机推荐

  1. struts2学习之基础笔记2

    6.5 Struts2 的基本配置 1web.xml 作用:加载核心过滤器 格式: <filter> ``````` </filter> <filter-mapping& ...

  2. Xshell调整终端显示的最大行数(缓冲区)

    1 选择会话,按顺序点击文件->属性 ,打开"会话属性"窗口 如下 在"会话属性"窗口中选择“终端” 修改缓冲区大小的值:其范围为0~2147483647 ...

  3. crontab中使用sudo命令的注意

    在使用crontab执行非root用户定时任务时,有时候shell脚本里需要用到sudo以获得root权限: 如: VIP_CARD=eth0 VIP_ADDR=192.168.4.119 NETMA ...

  4. 函数式编程－只用"表达式"，不用"语句"()

    把函数当作普通的运算符使用. 2. 只用"表达式",不用"语句"() "表达式"(expression)是一个单纯的运算过程,总是有返回值: ...

  5. css part 2

    CSS 盒子模型 margin:            用于控制元素与元素之间的距离:margin的最基本用途就是控制元素周围空间的间隔,从视觉角度上达到相互隔开的目的. padding:       ...

  6. 使用windowbuilder的时候更方便——设置默认把控件生成为成员变量而不是局部变量

    找了一大圈,最后还是上Google才找到这个方法的.以前改过了,重新设置工作目录之后设置都丢失了,却找不到改的办法,这次长个记性,记在自己博客里. 设置成成员属性的好处是随后使用这些控件的时候方便.

  7. OpenStack-API开发

    介绍两种OpenStack-API(Java版)--jcoulds && openstack4j Jclouds 1.介绍 jclouds -该API提供云计算环境的可移植抽象层以及云 ...

  8. 洛谷 P2665 [USACO08FEB]连线游戏Game of Lines

    P2665 [USACO08FEB]连线游戏Game of Lines 题目背景 Farmer John最近发明了一个游戏,来考验自命不凡的贝茜. 题目描述 Farmer John has chall ...

  9. jsp-include 写法

    被包含的页面: <%@ page language="java" import="java.util.*" pageEncoding="UTF- ...

  10. 【cocos2d-x 3.7 飞机大战】 决战南海I (二) 我方飞机的实现

    在上一篇中.我们实现了游戏的開始界面,接下来要实现游戏的主界面.主界面包括地图.我方飞机.敌机等 先来实现我方飞机 我方飞机具有哪些属性呢? 飞机要具有生命值.要有动画效果(尾部喷气),飞机不可以飞出 ...