vue引入百度地图

1. 申请开发者密钥（百度地图开放平台）
2. 安装插件：

npm install vue-baidu-map --save (vue2版本)

npm instal --save baidu-map-vue3 (vue3版本)

3. 在main.js中添加引用

import BaiduMap from 'vue-baidu-map'
Vue.use(BaiduMap,{
ak:'密钥'
})

4. 在页面中使用

（更多用法：dafrok.github.io/vue-baidu-m…）

<template>
    <div>
        <baidu-map class="map" :center="mapCenter" :zoom="10"         :scroll-wheel-zoom="true">
          //标点
          <bm-marker v-for="(item,index) in line" :key="index + '1'"     :position="item"></bm-marker>
          <bm-marker v-for="(item,index) in line1" :key="index + '2'"     :position="item"></bm-marker>
          //折线
          <bm-polyline :path="line" stroke-color="#297AFF" :stroke-    opacity="1" :stroke-weight="3" :editing="false"
            @lineupdate="updatePolylinePath1"></bm-polyline>
          <bm-polyline :path="line1" stroke-color="#297AFF" stroke-    style="dashed" :stroke-opacity="1" :stroke-weight="3"
            :editing="false" @lineupdate="updatePolylinePath2"></bm-polyline>
        </baidu-map>
    </div>
</template>
<script>
    export default{
        data(){
            return{
                line:[
                  {lng:116.404,lat:39.915},{lng:116.404,lat:39.915}  
                ],
                line1:[
                  {lng:116.404,lat:39.915},{lng:116.404,lat:39.915}  
                ],
                mapCenter:{lng:'',lat:''}
            }
        },
        created(){
        },
        mounted(){
        },
        methods:{
            updatePolylinePath1 (e) {
              this.line = e.target.getPath()
            },
            updatePolylinePath2 (e) {
              this.line1 = e.target.getPath()
            },
        }
    }
</script>
<style>
    .baidu-map{
        /*需要定义地图的宽高*/
        width:300px;
        height:300px;
    }
</style>