Vue集成百度地圖

時間 2019-11-13

標籤 vue 集成百度地圖简体版

原文原文鏈接

1. 問題的出現

咱們在Vue中使用地圖的時候，在首頁中引用了百度的api但仍是報錯,這個問題其實很好解決

2. 解決辦法

2.1. 正規方法

在index.html頁面中引入百度的API

/*
 * index.html
 **/

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>逛吃管理系統</title>
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta name="description" content="逛吃管理系統">
    <meta name="keyword" content="餐飲，娛樂">
    <link rel="icon" href="/asserts/images/favicon.ico" />
</head>
<body>
<div id="app"></div>
<script src="bundle.js"></script>

<!--百度地圖-祕鑰-->
<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=mEBI4fumOXV3HdfdfdNnl903dfdfdfdfrPwI6wtX&s=1"></script>
<!--百度地圖-加載鼠標繪製工具-->
<script type="text/javascript" src="https://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.js"></script>
<link rel="stylesheet" href="https://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.css"/>
<!--百度地圖-加載檢索信息窗口-->
<script type="text/javascript" src="https://api.map.baidu.com/library/SearchInfoWindow/1.4/src/SearchInfoWindow_min.js"></script>
<link rel="stylesheet" href="https://api.map.baidu.com/library/SearchInfoWindow/1.4/src/SearchInfoWindow_min.css"/>

<!--百度UEditor-->
<script type="text/javascript" src="/asserts/js/UEditor/UE/ueditor.config.js"></script>
<script type="text/javascript" src="/asserts/js/UEditor/UE/ueditor.all.min.js"></script>
<script type="text/javascript" src="/asserts/js/UEditor/UE/lang/zh-cn/zh-cn.js"></script>
<script type="text/javascript" src="/asserts/js/UEditor/UE/ueditor.parse.min.js"></script>

</body>
</html>

修改webpack的配置文件

/*
 * 增長externals屬性，並把百度用到的對象都導出去
 **/
externals: {
    "BMap": "BMap",
    "BMapLib": "BMapLib"
},

在vue組件中使用的時候直接import進來BMap對象就能夠隨便使用了

<template>
    <div>
        <div id="allmap" style="width: 100%;height:575px;"></div>

        <div class="block">
            <div class="s_block">
                <p>{{title}}</p>
                <h3>{{plase}}</h3>
                <button @click="btn_add">{{btn}}</button>
            </div>

        </div>
    </div>
</template>
<script>
    import BMap from 'BMap'
    import BMapLib from 'BMapLib'
    export default{
        data(){
            return {
                title: '目前您並無區塊數據',
                plase: '請添加區塊',
                btn: '添加區塊',
                pointArr:[]
            }
        },
        mounted(){
            this.$nextTick(function () {
                let _this = this
                //在此調用api
                let map = new BMap.Map("allmap")             // 建立Map實例
                map.centerAndZoom(new BMap.Point(116.404, 39.915), 11)
                let local = new BMap.LocalSearch(map, {
                    renderOptions: {map: map, autoViewport: true}
                })

                //回調得到覆蓋物信息
                let overlaycomplete = function(e){
                    let item=[]
                    let path=e.overlay.getPath()//返回多邊形的點數組
                    for(var i=0;i<path.length;i++){
                        console.log("lng:"+path[i].lng+"lat:"+path[i].lat)
                        let obj={}
                        obj.lng=path[i].lng
                        obj.lat=path[i].lat
                        item.push(obj)
                    }
                    _this.pointArr.push(item)
                    console.log(_this.pointArr)
                    localStorage['mapPoint']=JSON.stringify(_this.pointArr)
                }

                let BMapPoint1=[]
                var polygon = new BMap.Polygon(BMapPoint1, {strokeColor:"#438bd2", strokeWeight:3, strokeOpacity:0.8,strokeStyle: 'dashed'})  //建立多邊形
                map.addOverlay(polygon)   //增長多邊形

                let styleOptions = {
                    strokeColor: "#438bd2",    //邊線顏色。
                    strokeWeight: 3,       //邊線的寬度，以像素爲單位。
                    strokeOpacity: 0.8,       //邊線透明度，取值範圍0 - 1。
                    fillOpacity: 0.6,      //填充的透明度，取值範圍0 - 1。
                    strokeStyle: 'dashed' //邊線的樣式，solid或dashed。
                }
                //實例化鼠標繪製工具
                let drawingManager = new BMapLib.DrawingManager(map, {
                    isOpen: false, //是否開啓繪製模式
                    enableDrawingTool: true, //是否顯示工具欄
                    drawingToolOptions: {
                        anchor: BMAP_ANCHOR_TOP_RIGHT, //位置
                        offset: new BMap.Size(5, 5), //偏離值
                    },
                    polygonOptions: styleOptions, //多邊形的樣式
                })
                //添加鼠標繪製工具監聽事件，用於獲取繪製結果
                drawingManager.addEventListener('overlaycomplete', overlaycomplete)


            })


        },
        methods: {

            btn_add(){
                if (this.btn == '添加區塊') {
                    this.title = ''
                    this.plase = "請保存添加區塊"
                    this.btn = "保存"
                } else {
                    this.title = '目前您並無區塊數據',
                        this.plase = '請添加區塊',
                        this.btn = '添加區塊'
                }


            }

        }
    }
</script>
<style>
    .BMapLib_marker,.BMapLib_circle,.BMapLib_polyline,.BMapLib_rectangle {
        display: none;
    }
</style>
<style lang="scss" scoped>
    .block {

        width: 318px;
        height: 100%;
        background: #f2f2f2;
        position: absolute;
        left: 0;
        top: 0;
        box-shadow: 3px 3px 3px #ccc;
        color: #ccc;
        .s_block {
            width: 318px;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate3d(-50%, -50%, 0);
            text-align: center;
            line-height: 30px;
            button {
                background: #328ff7;
                color: #fff;
                border: none;
                border-radius: 5px;
                height: 25px;
                cursor: pointer;
            }

        }
    }
</style>

2.2. 非正規方法

這個方法也能夠解決，可是不推薦，寫出來只是讓你們學習一下這種寫法思路
參考：http://blog.csdn.net/sinat_35515778/article/details/72677390
代碼實現

export function MP(ak) {
    return new Promise(function (resolve, reject) {
        window.onload = function () {
            resolve(BMap)
        }
        var script = document.createElement("script") 
        script.type = "text/javascript" 
        script.src = "http://api.map.baidu.com/api?v=2.0&ak="+ak+"&callback=init" 
        script.onerror = reject 
        document.head.appendChild(script) 
    })
}

在你的百度地圖頁面中調用(ak 就是你的密鑰) 
<template>
    <div class="welcomeContainer">
        歡迎使用B2B後臺管理系統，若是有bug,請反饋到技術組。
        <div id="allmap"></div>
    </div>
</template>

<style scoped lang="scss">

    #allmap {
        height: 600px;
        width: 100%;
    }

    /*不要嵌套太深*/
    /*定義內容區域常量*/
    $contentWidth: 1200px;

    .homeContainer {
        overflow-y: visible;
        position: static;
        > div {
            width: 100%;
        }
    }

    .header {
        background-color: limegreen;
        height: 60px;
    }

    .main {

        position: absolute;
        top: 60px;
        bottom: 0;
        display: flex;
    }

    .menu {
        width: 200px;
        background-color: purple;
        float: left;
    }

    .content {
        float: left;
        flex: 1;
        background-color: yellowgreen;
    }


</style>

<script>
    import {MP} from './map.js'
    export default{
        data(){
            return {
                ak: 'xxxxxxI4fumOXV3HW5xUjNnl903rPwI6wtX'
            }
        },
        mounted(){

            this.$nextTick(function () {
                var _this = this
                MP(_this.ak).then(BMap => {
                    //在此調用api
                    var map = new BMap.Map("allmap")             // 建立Map實例
                    map.centerAndZoom(new BMap.Point(116.404, 39.915), 11)
                    var local = new BMap.LocalSearch(map, {
                        renderOptions: {map: map, autoViewport: true}
                    })
                    local.searchNearby("小吃", "前門")
                })
            })

        }
    }
</script>