vue引入百度地图api组件封装（根据地址定位）

Map.vue

<template>
  <div class="Map" :style="{
    height: this.height+'px',
    width:this.width+ 'px'
    }">
    <div id="allmap"></div>
  </div>
</template>

<script>
  /* eslint-disable quotes,camelcase */

  import {MP} from "./js/map"
//  import {MP} from "./js/BMap"
//  import {Change} from './js/changeJingwei'
  export default {
    name: 'Map',
    data () {
      return {
        ak: 'oWk8ofl3pI7jt4P9nng4cw2zyOQhY3pi'
      }
    },
    mounted() {
      this.$nextTick(function () {
        MP("oWk8ofl3pI7jt4P9nng4cw2zyOQhY3pi").then( BMap => {
          var th = this
          var map = new BMap.Map("allmap");            // 创建Map实例
          var point = new BMap.Point(116.404, 39.915); // 创建点坐标
          map.centerAndZoom(point,15);
          map.enableScrollWheelZoom();
          var myValue
          myValue = this.province+  this.city+ '' +  '' + this.name;  //传入相应参数 省、市、区、街道、名称 （内容可以为空）
          setPlace();
          function setPlace(){
            map.clearOverlays();    //清除地图上所有覆盖物
            function myFun(){
              th.userlocation = local.getResults().getPoi(0).point;    //获取第一个智能搜索的结果
              map.centerAndZoom(th.userlocation, 16);
              map.addOverlay(new BMap.Marker(th.userlocation));    //添加标注
            }
            var local = new BMap.LocalSearch(map, { //智能搜索
              onSearchComplete: myFun
            });
            local.search(myValue);
          }
        })
      })
    },
    props: {
      province: {
        type: String
      },
      name: {
        type: String
      },
      city: {
          type:String
      },
      height: {
        type: Number
      },
      width: {
        type: Number
      }
    },
    methods: {
      sad(){
        let map = new BMap.Map("allmap");    // 创建Map实例
        map.centerAndZoom(new BMap.Point(116.331398, 39.897445), 10);
        map.enableScrollWheelZoom(true);
        map.clearOverlays();
        console.log(data.result.location.lng);
        console.log(data.result.location.lat);
        let new_point = new BMap.Point(data.result.location.lng, data.result.location.lat);
        let marker = new BMap.Marker(new_point);  // 创建标注
        map.addOverlay(marker);              // 将标注添加到地图中
        map.panTo(new_point);
        map.setCurrentCity(this.province);          // 设置地图显示的城市 此项是必须设置的
      }
    }
  }
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  #allmap {
    height: 100%;
    width: 100%;
  }
</style>

map.js

export function MP(ak) {
  return new Promise(function (resolve, reject) {
    window.init = 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);
  })
}

你们的支持，是我坚持的动力~