vue2.0之百度地图使用

1: 在index.html文件下添加

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=yourAk"></script>

2: 在build文件夹下找到webpack.base.conf.js并在entry 同级下 添加externals: {   'BMap': 'BMap' },
   

3: 在 components中添加 BMapComponent.vue,具体代码如下:

　　<template>
    　　<div id="allmap" v-bind:lat="lat" v-bind:lng="lng"  v-bind:style="mapStyle" ></div>
　　</template>
　　<script>
   　　 export default {
        　　data() {
            　　return {}
       　　 },
       　　 props: ['lat', 'lng','mapStyle'],
       　　 mounted() {
        　　    this.initMap();
      　　  },
     　　   methods: {
       　　     initMap: function() {
        　　        // 百度地图API功能
         　　       var map = new BMap.Map("allmap");
        　　        var point = new BMap.Point(this.lng, this.lat);
          　　      map.centerAndZoom(point, 10);
         　　       var marker = new BMap.Marker(point); // 创建标注
             　　   map.addOverlay(marker); // 将标注添加到地图中
           　　     marker.disableDragging(); // 不可拖拽
         　　   }
       　　 }
   　　 }
　　</script>
　　<style>
  　　  #allmap {
   　　     top: 15px;
     　　   overflow: hidden;
  　　  }
 　　   /* 去掉地图左下角的百度LOGO */
   　　 .anchorBL {
    　　    display: none
   　　 }
　　</style>

4:在所使用组件中如下

<style scoped >
    .mapBox {
        width: 100%;
        height: 3rem;
        margin-top: 15px;
        text-align: center;
    }
    .mapBox span {
        color: '#ccc', ;
        font-size: 18px;
        font-style: normal;
        font-family: 'sans-serif';
        font-weight: bold;
    }
</style>
<template>
    <div>
        <v-head :header_title="title_context"></v-head>
        <section class="section">
            <div class="mapBox" id="flowChartImg">
                <span>企业地理位置</span>
                <b-map-component :lat="lat" :lng="lng" :style="mapStyle"></b-map-component>
            </div>
        </section>
        
    </div>
</template>

<script>
    import head from "../../components/head";
    import BMapComponent from '../../components/BMapComponent.vue';
    export default {
        data() {
            return {
                title_context: "厂站信息",
                lat: 39.74858,
                lng: 116.572487,
                mapStyle:{
                  width:'100%',
                  height:'100%'
                }
            }
        },
        components:{
            vHead: head,
            BMapComponent: BMapComponent,
        },
        methods: {},
        mounted() {}
    }
    
</script>