百度地图API的使用示例
刚刚工作的时候写过百度地图API文档，那时候没有记录到技术博客里面，今天在群里看见有个姑娘在问这个问题，重温了一遍，这个API还算好用。百度地图API，集成简单好用，全面，兼容问题，文档全面；
官方文档：
http://lbsyun.baidu.com/jsdemo.htm#d0_1
选择百度地图的一个很重要的原因是百度地图支持离线地图,开发者发布App前可以将离线地图数据包提前打包到App中,或者让用户自己导入。不过目前百度的离线地图只有普通地图样式,还没有卫星地图。
官方demo的使用
<!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=2yj0orPscf4IFIGVG2nrlYRFrGNYozAh"></script>
<title>纯文本的信息窗口</title>
</head>
<body>
<div id="allmap"></div>
<p>点击标注点，可查看由纯文本构成的简单型信息窗口</p>
</body>
</html>
<script type="text/javascript">
// 百度地图API功能
var map = new BMap.Map("allmap");
var point = new BMap.Point(116.417854,39.921988);
var marker = new BMap.Marker(point); // 创建标注
map.addOverlay(marker); // 将标注添加到地图中
map.centerAndZoom(point, 15);
var opts = {
width : 200, // 信息窗口宽度
height: 100, // 信息窗口高度
title : "海底捞王府井店" , // 信息窗口标题
enableMessage:true,//设置允许信息窗发送短息
message:"亲耐滴，晚上一起吃个饭吧？戳下面的链接看下地址喔~"
}
var infoWindow = new BMap.InfoWindow("地址：北京市东城区王府井大街88号乐天银泰百货八层", opts); // 创建信息窗口对象
marker.addEventListener("click", function(){
map.openInfoWindow(infoWindow,point); //开启信息窗口
});
//关注「编程微刊」公众号 ，在微信后台回复「领取资源」，获取IT资源200G干货大全。公众号回复“1”，拉你进程序员技术讨论群
</script>
体验入口
http://www.intmote.com/11.html
关于密钥问题
在官方API里面，密钥是没有设置的，需要自己手动添加
<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的使用示例的更多相关文章
- 百度地图API示例之设置级别setZoom与禁止拖拽disableDragging
百度地图API示例之设置级别setZoom与禁止拖拽disableDragging 设置级别 <html> <head> <meta http-equiv="C ...
- HTML 百度地图API调用示例源码
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- 百度地图API示例之移动地图
级别为6 级别为8 级别为12 代码: <!DOCTYPE html> <html> <head> <meta http-equiv="Conten ...
- 百度地图API示例之根据城市名设置地图中心点
代码: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" con ...
- 百度地图API示例之设置地图最大、最小级别
代码 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" cont ...
- 百度地图API示例之设置地图显示范围
代码 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" cont ...
- 百度地图API示例之添加/删除工具条、比例尺控件
代码 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" cont ...
- 百度地图API示例之添加定位相关控件
代码 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" cont ...
- 百度地图API 简单示例
百度地图API2.0需要申请AK javascript引用百度地图API 设置地图DIV样式 javascript设置地图DIV 如下图代码: <!DOCTYPE html> <ht ...
随机推荐
- STL数组和com数组相互转换的做法
作者:朱金灿 来源:http://blog.csdn.net/clever101 STL的泛型数组是vetor,com的泛型数组类型是VARIANT.二者怎样能相互转化呢?就是说怎么把一个vector ...
- Java数据库连接——jdbc-odbc桥连接方式及汉字乱码问题
jdbc-odbc桥连接方式操作数据库SU(Course),其中Course属性有Cno,Cname,Cpno,Ccredit. 步骤: 1.配置数据源 控制面板下搜索管理工具->ODBC数据源 ...
- PostgreSQL 索引膨胀
索引膨胀,主要针对B-tree而言 索引膨胀的几个来源: 大量删除发生后,导致索引页面稀疏,降低了索引的使用效率: PG9.0之前的版本,vacuum full会同样导致索引页面稀疏: 长时间运行的事 ...
- 利用IP安全策略关闭危险端口
默认情况下,Windows服务器有很多端口是开放的,网络病毒和黑客可以通过这些端口连上你的服务器并进行攻击. 为了让你的系统变为铜墙铁壁,应该封闭这些端口,主要有:TCP 135.139.445.59 ...
- springMVC小项目实例
一.什么是 Spring MVC Spring MVC 属于 SpringFrameWork 的后续产品,已经融合在 Spring Web Flow 里面,是一个强大灵活的 Web 框架.Spring ...
- 微信小程序手势滑动卡片案例
最近工作中有项目要使用微信小程序技术进行开发,其中一项功能困扰了我很久,卡片滑动动效以及手势识别.经过一番研究和参考,现在把成果展示.记录自己踩到的坑,如果大家有需要,也可以帮助到大家. 效果图: 首 ...
- javaweb集成swagger
一.添加依赖 <dependency> <groupId>io.springfox</groupId> <artifactId>springfox-sw ...
- 性能测试中的TPS与HPS
性能测试中的TPS与HPS TPS(Transaction per second) 是估算应用系统性能的重要依据.其意义是应用系统每秒钟处理完成的交易数量.一般的,评价系统性能均以每秒钟完成的技术交易 ...
- 从A小程序跳转到B小程序
从A小程序跳转到B小程序: A小程序 wxml: <navigator target="miniProgram" open-type="navigate" ...
- UT源码+105032014018
设计佣金问题的程序 commission方法是用来计算销售佣金的需求,手机配件的销售商,手机配件有耳机(headphone).手机壳(Mobile phone shell).手机贴膜(Cellphon ...