vue 專案中引用百度地圖

abcByme發表於2018-12-19
Vue地圖

新建map.js

export const BaiduMap = {
    init: function() {
        const BMapURL = `https://api.map.baidu.com/api?v=3.0&ak=` + AK + `&s=1&callback=onBMapCallback`
　　　　 return new Promise((resolve, reject) => {
            // 如果已載入直接返回
            if (typeof BMap !== `undefined`) {
                resolve(BMap)
                return true
            }
            // 百度地圖非同步載入回撥處理
            window.onBMapCallback = function() {
                console.log(`百度地圖指令碼初始化成功...`)
                resolve(BMap)
            };
            // 插入script指令碼
            let scriptNode = document.createElement(`script`)
            scriptNode.setAttribute(`type`, `text/javascript`)
            scriptNode.setAttribute(`src`, BMapURL)
            document.body.appendChild(scriptNode)
        })
    }
}

在引用的元件中引入map.js

import {
        BaiduMap
} from `@/common/js/map.js`;

div包裹引用

<template>
    <div>
        <div id="allmap" ref="allmap"></div>
    </div>
</template>

設定css高度

<style lang="scss" scoped>
#allmap{
    height:400px;
}
</style>

呼叫方法

mounted() {
        this.$nextTick(function() {
            BaiduMap.init().then(BMap => {
                let map = new BMap.Map(this.$refs.allmap);  // 建立Map例項
                map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); // 初始化地圖,設定中心點座標和地圖級別
                map.addControl(new BMap.MapTypeControl({ //新增地圖型別控制元件
                    mapTypes: [
                        BMAP_NORMAL_MAP,
                        BMAP_HYBRID_MAP
                    ]
                }));
                map.setCurrentCity("北京"); // 設定地圖顯示的城市 此項是必須設定的
                map.enableScrollWheelZoom(true);  //開啟滑鼠滾輪縮放
            })
        })

    },

搞定！

 

相關文章