百度地图开发实例文章（一）
一 前言
这是百度地图javascript开发系列文章的第一篇，主要讲如何使用百度地图，介绍了如何通过官方给出的demo和开发文档来在百度地图上面做开发，最后我们将通过一个例子成功运行代码。
系列文章对百度第三方库的引用方式都是嵌入script标签的形式，对于vue-BMap等组件方式的使用不作为参考，但是方法实例是基本相同的。
二 正文
1.百度地图使用介绍
百度地图 javascriptAPI
使用百度地图做开发的例子比比皆是，使用百度地图API，你可以在百度地图上绘制所需要的信息，比如画旗标，画边界，画路况图等，实现成功定制地图。
2.前期准备
引入文件：
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>
使用百度地图库需要一个密钥，你可以到百度地图官网上去申请。
申请密钥
3.官网参考
3-1 DEMO
你可以在DEMO界面书写自己的代码，运行之后实时看到效果；也可以在此做调试，最后确定代码。
3-2 类参考
这里是全面的开发文档，百度地图支持的所有方法都可以从这里面找到。
4.创建实例
4-1. 创建html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>百度地图</title>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥">
</script>
</head>
<body>
<div id="container"></div>
</body>
</html>
4-2. 设置容器样式
<style type="text/css"> html{height:100%} body{height:100%;margin:0px;padding:0px} #container{height:100%}
</style>
4-3. 创建地图实例
<script type="text/javascript">
var map = new BMap.Map("container");// 这里地图容器是 container div
// 创建地图实例
var point = new BMap.Point(116.404, 39.915);
// 创建点坐标
map.centerAndZoom(point, 15);
// 初始化地图，设置中心点坐标和地图级别
</script>
4-4. 完整文档
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Hello, World</title>
<style type="text/css">
html{height:100%}
body{height:100%;margin:0px;padding:0px}
#container{height:100%}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥">
//v2.0版本的引用方式：src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"
</script>
</head> <body>
<div id="container"></div>
<script type="text/javascript">
var map = new BMap.Map("container");// 创建地图实例
var point = new BMap.Point(116.404, 39.915);// 创建点坐标
map.centerAndZoom(point, 15);// 初始化地图，设置中心点坐标和地图级别
</script>
</body>
</html>
至此复制上面代码就可以在页面上看到地图了。
5.总结思考
有时候在引用
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>的时候会报错，不接受http方式的引用，这时候只需要把地址换成https协议就可以了：
<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>
三 后记
通过本文，你成功把地图引入了你的开发页面。由于地图上的操作都是和传统的视图没有关系，所以那些UI框架基本上发挥不了它强大的视图绑定功能。在地图上的开发还都是以写JS逻辑为主。所以JS语法要加强学习哦～
百度地图开发实例文章（一）相关推荐
- [android] 百度地图开发 (二).定位城市位置和城市POI搜索
一. 百度地图城市定位和POI搜索知识 上一篇文章"百度地图开发(一)"中讲述了如何申请百度APIKey及解决显示空白网格的问题.该篇文章主要讲述如何定位城市位置.定位 ...
- [android] 百度地图开发 (一).申请AK显示地图及解决显示空白网格问题
最近做android百度地图,但是使用baidumapapi_v2_3_1.jar和libBaiduMapSDK_v2_3_1.so显示百度地图时总是遇到问题--只显示网格而没有显示地图,网络 ...
- 百度地图开发技术方案及解决办法
技术方案及解决办法 文章目录 技术方案及解决办法 总体方案 基础框架 前端网页 后端程序 结合搭建方法 跨域解决 python处理excel 问题描述 解决办法 网页结构 vue实例 内容引入 ele ...
- [android] 百度地图开发 (三).定位当前位置及getLastKnownLocation获取location总为空问题
前一篇百度地图开发讲述"(二).定位城市位置和城市POI搜索",主要通过监听对象MKSearchListener类实现城市兴趣点POI(Point of Intere ...
- 使用QT嵌入百度地图开发高B格岸基监控软件
文章目录 1.简述 2.百度地图 2.1百度地图准备 2.2 百度地图开发 2.2.1实时绘制轨迹 2.2.2设定航点 3 QT软件开发 3.1使用QWebEngineView显示Html 3.2 M ...
- 基于Android的百度地图开发
参考资料: android studio获得SHA1的值,然后在百度地图移动版API官网申请key Android Studio怎么查看程序的安全码获取SHA1值? http://www.codese ...
- 通过腾讯地图、高德地图、百度地图开发接口获取坐标对应的周边相关信息
通过腾讯地图.高德地图.百度地图开发接口获取坐标对应的周边相关信息 更新: 以前出于好意暴露了个人的KEY,现已被烂用.为不影响您的业务,请使用我的KEY的朋友去申请自己的KEY,我的KEY将在不久后 ...
- 谷歌 地图 android studio,Android Studio百度地图开发（一）
该楼层疑似违规已被系统折叠 隐藏此楼查看此楼 本人用Android Studio做百度地图开发,调试了一整天,始终无法通过.然后怀疑代码有问题,就换Eclipse进行代码编写,毕竟网上关于Eclips ...
- Android studio百度地图SDK开发 2020最新超详细的Android 百度地图开发讲解(3) 路线规划步行骑行驾车路线规划
2020最新超详细的Android 百度地图开发讲解(3) 路线规划步行骑行驾车路线规划 开发前配置,显示基本地图,实时定位等查看之前代码,此博客紧接上一博客:https://blog.csdn.ne ...
最新文章
- 波士顿房价预测学习项目笔记
- python.freelycode.com-不完整的Http读取和Python中的Requests库
- 高并发编程-深入分析wait和sleep的区别并结合源码示例佐证
- 移动短信回执怎么开通_移动短信回执业务内容及资费介绍
- C#操作config文件
- 每日三道前端面试题--vue 第二弹
- Ubuntu Linux 8.04 Vsftp 假造用户设置
- 阶段5 3.微服务项目【学成在线】_day05 消息中间件RabbitMQ_2.RabbitMQ研究-RabbitMQ介绍...
- 手机模拟门禁卡 — 加密门禁卡模拟教程
- js国际区号json
- 如何选择适合你的兴趣爱好（四十六），豫剧
- 有关access的上机试题_2016年计算机二级《Access》上机操作题及答案
- 杭州电子科技大学考研计算机科学与技术,杭州电子科技大学考研好考吗
- 宝塔面板ab模板建站_2020PHP自助建站系统源码/宝塔在线自助建站系统源码/集成多套模板/在线云建站系统模板...
- macbook键盘失灵_如何使用MacBook的键盘在所有设备上键入
- RuoYi-Vue——关于登录后不同角色跳不同页面
- 什么是MTTF,MTBF?
- 阿里阿里，搞不定政企
- Python - names模块解析（海量英文名）
- Springboot毕设项目爱团购系统设计与实现kh533（java+VUE+Mybatis+Maven+Mysql）