百度地图开发实例文章（一）
一 前言
这是百度地图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语法要加强学习哦～
相关推荐
etzt 2020-04-16
etzt 2020-01-06
shilongdred 2019-12-22
magvwiz 2020-09-26
mickeychan 2020-09-17
rungod 2020-09-16
xiaozhukuaitui 2020-09-05
小西0 2020-09-05
xiaozhukuaitui 2020-08-25
龙心尘 2020-08-25
rungod 2020-08-22
waiwaiLILI 2020-07-20
shilongdred 2020-06-28
人工智能快报 2020-06-09
shilongdred 2020-06-08
id=3&hmsr=%E5%BC%80%E5%8F%91%E8%80%85-AI%E5%AD%A6%E4%B9%A0%E8%B7%AF%E7%BA%BF&hmpl=&hmcu=&hmkw=&hmci=
zmosquito 2020-06-02
nextwhy 2020-05-20