1，引入百度地圖
import BaiduMap from 'vue-baidu-map'
使用你引入的百度地圖插件（ak是激活碼，這要到百度api進(jìn)行注冊獲取到。）
Vue.use(BaiduMap, {
? ak: ''
})
2，頁面里面調(diào)用百度地圖使用
import {BaiduMap, BmControl, BmView, BmAutoComplete, BmLocalSearch,BmlMarkerClusterer} from 'vue-baidu-map'
components: {
? ? ? BaiduMap,
? ? ? BmView,
? ? ? BmControl,
? ? ? BmAutoComplete,
? ? ? BmLocalSearch,
? ? ? coupleList,
? ? ? BmlMarkerClusterer
? ? },
<template>
????<div id="allmap" ref="allmap"></div>
</template>
// 創(chuàng)建地圖
? ? ? createMap(){
? ? ? ? var map = new BMap.Map("allmap"); //在百度地圖容器中創(chuàng)建一個(gè)地圖
? ? ? ? var point = new BMap.Point(106.778458, 33.646665);//定義一個(gè)中心點(diǎn)坐標(biāo)
? ? ? ? map.centerAndZoom(point,7);//設(shè)定地圖的中心點(diǎn)和坐標(biāo)并將地圖顯示在地圖容器中
? ? ? ? map.enableDragging();//啟用地圖拖拽事件，默認(rèn)啟用(可不寫)
? ? ? ? map.enableScrollWheelZoom();//啟用地圖滾輪放大縮小
? ? ? ? map.enableDoubleClickZoom();//啟用鼠標(biāo)雙擊放大，默認(rèn)啟用(可不寫)
? ? ? ? map.enableKeyboard();//啟用鍵盤上下左右鍵移動地圖
? ? ? ? var top_right_navigation = new BMap.NavigationControl({anchor: BMAP_ANCHOR_BOTTOM_RIGHT, type: BMAP_NAVIGATION_CONTROL_SMALL}); //右上角，僅包含平移和縮放按鈕
? ? ? ? /*縮放控件type有四種類型:
? ? ? ? BMAP_NAVIGATION_CONTROL_SMALL：僅包含平移和縮放按鈕；BMAP_NAVIGATION_CONTROL_PAN:僅包含平移按鈕；BMAP_NAVIGATION_CONTROL_ZOOM：僅包含縮放按鈕*/
? ? ? ? //添加控件和比例尺
? ? ? ? map.addControl(top_right_navigation);
? ? ? ? window.map = map;//將map變量存儲在全局
? ? ? },
3，遇到問題報(bào)錯(cuò)：Bmap is not defined
mounted () {
? this.init()?.then((BMap) => {
? ? ? ? console.log("加載成功...")
? ? ? ? this.createMap() ; //創(chuàng)建地圖
? ? ? ? // this.setMapEvent();//設(shè)置地圖事件添加控件
? ? ? ? ? this.addMapControl();//獲取地圖的當(dāng)前區(qū)域
? ? ? ? ? this.addMarker() //向地圖中添加marker標(biāo)注
? ? ? })? ?
? },
methods: {
? ? ? init(){
? ? ? ? ? console.log("初始化百度地圖腳本...");
? ? ? ? ? const AK = " ";
? ? ? ? ? const apiVersion = "2.0";
? ? ? ? ? const timestamp = new Date().getTime();
? ? ? ? ? const BMap_URL = "http://api.map.baidu.com/getscript?v="+ apiVersion +"&ak="+ AK +"&services=&t=" + timestamp;
? ? ? ? ? return new Promise((resolve, reject) => {
? ? ? ? ? ? if(typeof BMap !== "undefined") {
? ? ? ? ? ? ? resolve(BMap);
? ? ? ? ? ? ? return true;
? ? ? ? ? ? }
? ? ? ? ? ? // 插入script腳本
? ? ? ? ? ? let scriptNode = document.createElement("script");
? ? ? ? ? ? scriptNode.setAttribute("type", "text/javascript");
? ? ? ? ? ? scriptNode.setAttribute("src", BMap_URL);
? ? ? ? ? ? document.body.appendChild(scriptNode);
? ? ? ? ? ? // 等待頁面加載完畢回調(diào)
? ? ? ? ? ? let timeout = 0;
? ? ? ? ? ? let interval = setInterval(() => {
? ? ? ? ? ? ? // 超時(shí)10秒加載失敗
? ? ? ? ? ? ? if(timeout >= 20) {
? ? ? ? ? ? ? ? reject();
? ? ? ? ? ? ? ? clearInterval(interval);
? ? ? ? ? ? ? ? console.error("百度地圖腳本初始化失敗...");
? ? ? ? ? ? ? }
? ? ? ? ? ? ? // 加載成功
? ? ? ? ? ? ? if(typeof BMap !== "undefined") {
? ? ? ? ? ? ? ? resolve(BMap);
? ? ? ? ? ? ? ? clearInterval(interval);
? ? ? ? ? ? ? ? console.log("百度地圖腳本初始化成功...");
? ? ? ? ? ? ? }
? ? ? ? ? ? ? timeout += 1;
? ? ? ? ? ? }, 500);
? ? ? ? ? });
? ? ? },
}
