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>

3. 参考和引用

4. 特别感谢

公司的小伙伴

5. 免责说明

本文档中的部份内容摘自网上的众多博客，仅做为本身知识的补充和整理，并分享给其余须要的coder，不会用于商用。
由于不少博客的地址看完没有及时作保存，因此不少不会在这里标明出处，很是感谢各位大牛的分享，也但愿你们理解。
若是原文做者感受不适，能够及时联系我shiguoqing999@163.com,我将及时删除争议部份内容

6. 追责声明

若有大段引用超过全文50%的内容，请在文档结尾标明原文出处：龙马行空-石国庆-朱庇特-https://my.oschina.net/u/1416844/blog，不然将视为抄袭，予以法律追究，请各位尊重我的知识产权。