前言
最近做项目，项目要求某个网页中嵌入一个地图控件，对这个控件的要求是能动态获取后台数据传来的json数据中的位置信息。
经过一番筛选（尝试了好几种地图），我最后在众多地图中选择了百度地图。
地图选好了 ，那么我们怎么把地图控件放入网页中使用呢？
前置操作
以下是前置操作，一共四步：
-
第一步：下载百度地图包 vue-baidu-map
npm i vue-baidu-map --save
-
第二步：在对应网页的main.js中引用百度地图
import BaiduMap from 'vue-baidu-map';
Vue.use(BaiduMap, {
/* Visit http://lbsyun.baidu.com/apiconsole/key for details about app key. */
ak: 'YOUR_APP_KEY'
})
-
第三步：去百度API申请地图密钥（访问应用AK）
- 上一步添加的代码的注释中为申请地图密钥的网址：点我去申请密钥网址
- 百度地图需要用户创建应用，然后会给这个应用申请一个密钥（访问应用AK），有了这个AK才能在项目中引用地图。申请密钥的流程图示写在后面了。
-
第四步：填写地图AK
- 在第二步main.js文件中添加的代码的ak:后面输入你申请好的地图AK。
- 在你的html页面添加如下代码，ak后面添加你申请好的地图AK。
<script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=你的AK"></script>
Vue组件内的操作
创建一个map.vue组件，以下是在Vue组件中的操作：
- 第一步：在template中创建一个div，我们的地图组件就创建在这个div中。
- 注意：这个div一定要定宽定高，不然地图组件无法显示。
<template>
<div id="map" style="200px;height:200px;"></div>
</template>
- 第二步：使用API功能创建Map实例。代码如下，直接放进mounted就可以，这时我们的地图就可以显示了：
// 百度地图API功能
var map = new BMap.Map("map"); // 创建Map实例
map.centerAndZoom(new BMap.Point(121.551257,38.890002), 11); // 初始化地图,设置中心点坐标和地图级别
//添加地图类型控件
map.addControl(new BMap.MapTypeControl({
mapTypes:[
BMAP_NORMAL_MAP,
BMAP_HYBRID_MAP
]}));
map.setCurrentCity("大连"); // 设置地图显示的城市 此项是必须设置的
map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
给地图添加标注
更多详细请见 百度地图API
代码如下，添加的标注样式是
marker.setTitle的作用是添加标签，样式如下：
var point = new BMap.Point(location1,location2);
map.centerAndZoom(point, 10);
var marker = new BMap.Marker(point); // 创建标注
marker.setTitle("我是标题");
map.addOverlay(marker); // 将标注添加到地图中
// 设置标注动画效果。如果参数为null，则取消动画效果。该方法需要在addOverlay方法后设置
marker.setAnimation(Animation);
最后我使用JSON解析后的坐标地址添加完的标注：
去掉百度地图的Logo
百度地图的Logo是使用css样式放上去的，我们可以使用css样式覆盖掉：
.BMap_cpyCtrl {
display: none;
}
.anchorBL {
display: none;
}
申请地图密钥（访问应用AK）
创建应用实例流程图示：
申请密钥页面：（点这个蓝色的创建应用）
填写应用名称：（自己的项目名称）
选择自己的应用类型：（服务端、微信小程序、Android、iOS、浏览器端五选一）
我自己是网页端的项目，就选择网页端了。
选择启用的服务：
选择应用类型之后，下面的启用服务列表会根据你的选择变化，根据你的需求选择启用服务。
填写Referer白名单：
根据输入框下面的提示，输入您的域名。如果不知道怎么填的话，可以直接打一个英文半角星号上去。
创建成功之后就会跳到原来的应用列表页面，列表中的访问应用AK就是你这个项目申请的地图密钥。