2

一 前言

这是百度地图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语法要加强学习哦~


specialcoder
2.2k 声望170 粉丝

前端 设计 摄影 文学