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);
  })
}

 

你們的支持，是我堅持的動力~