前言
最近做項目，項目要求某個網頁中嵌入一個地圖控件，對這個控件的要求是能動態獲取后台數據傳來的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="width: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就是你這個項目申請的地圖密鑰。