怎么在vue項目中調用百度地圖api

怎么在vue項目中調用百度地圖api？很多新手對此不是很清楚，為了幫助大家解決這個難題，下面小編將為大家詳細講解，有這方面需求的人可以來學習下，希望你能有所收獲。

1.在百度地圖申請密鑰: http://lbsyun.baidu.com/  將

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=密鑰" ></script> 中的 密鑰替換成你申請的,在 vue項目的index.html引用。

2. 在build 文件下下的 webpack.base.conf.js貼入代碼

externals: {
  "BMap": "BMap"
 },

3. map.vue代碼(demo可以直接使用,demo使用了vue-clipboard2插件,請自行安裝)

<template>
  <div>
    <el-row >
     <el-col :offset="2" :span="8">
       <el-input :id="suggestId" v-model="address_detail" :clearable='clearable' placeholder="請輸入店鋪地址,獲取店鋪坐標" >
      </el-input>
    </el-col>
    <el-col :span="2">
      <el-button id="position" @click="search" type="primary">定位</el-button>
    </el-col>
    <el-col :span="12" >
     <el-tag type="success" v-clipboard:copy="userlocation.lng" v-clipboard:success="onCopy" v-clipboard:error="onError" >經度 {{userlocation.lng}}</el-tag>
     <el-tag type="success" v-clipboard:copy="userlocation.lat" v-clipboard:success="onCopy" v-clipboard:error="onError">緯度 {{userlocation.lat}}</el-tag>
     <el-tag type="success" ><<<<點擊左側按鈕復制經緯度信息</el-tag>
    </el-col> 
  </el-row>
  <el-row>
    <el-col :offset="2" :span="18">
      <div id="map_canvas" class="allmap"></div>
    </el-col>
  </el-row>
  </div>
</template>
<script>
export default {
 data() {
  return {
   address_detail: "", //詳細地址
   userlocation: { lng: "", lat: "" },
   clearable: true,
   suggestId: "suggestId",
   map : {},
   mk: {}
  };
 },
 created () {
   
 },
 methods: {
   drawMap() {
    this.map = new BMap.Map("map_canvas");        // 創建地圖實例
    this.map.addControl(new BMap.NavigationControl());      // 啟用放大縮小 尺
    this.map.enableScrollWheelZoom();
    this.getlocation();//獲取當前坐標, 測試時獲取定位不準。
  
    var point = new BMap.Point(this.userlocation.lng, this.userlocation.lat); // 創建點坐標 
    this.map.centerAndZoom(point, 13);         // 初始化地圖，設置中心點坐標和地圖級別 
    var marker = new BMap.Marker(point);    // 創建標注  
    this.map.addOverlay(marker);           // 將標注添加到地圖中
     
    var ac = new BMap.Autocomplete({
    //建立一個自動完成的對象
    input: "suggestId",
    location: this.map
    });
    var myValue;
   ac.addEventListener("onconfirm", (e)=> {
    //鼠標點擊下拉列表后的事件
    var _value = e.item.value;
    myValue =_value.province +_value.city +_value.district +_value.street +_value.business;
    this.address_detail = myValue;
    this.setPlace();
   });
   },
   getMarker (point) {
        this.mk = new BMap.Marker(point); 
        this.mk.addEventListener("dragend", this.showInfo);
        this.mk.enableDragging();  //可拖拽
        this.getAddress(point);
        this.map.addOverlay(this.mk);//把點添加到地圖上 
        this.map.panTo(point);
   },
   getlocation () {
    //獲取當前位置
    var geolocation = new BMap.Geolocation(); 
    geolocation.getCurrentPosition((r) =>{ 
      if(geolocation.getStatus() == BMAP_STATUS_SUCCESS){ 
        this.getMarker(r.point);
        this.userlocation = r.point;
      }else { 
        alert('failed'+this.getStatus()); 
      } 
    });
   },
   //綁定Marker的拖拽事件
     showInfo(e){
      var gc = new BMap.Geocoder();
      gc.getLocation(e.point, (rs)=>{
        var addComp = rs.addressComponents;
        var address = addComp.province + addComp.city + addComp.district + addComp.street + addComp.streetNumber;//獲取地址
         
        //畫圖 ---》顯示地址信息
        var label = new BMap.Label(address,{offset:new BMap.Size(20,-10)});
        this.map.removeOverlay(this.mk.getLabel());//刪除之前的label
 
        this.mk.setLabel(label);
        this.address_detail = address;
        this.userlocation = e.point;
         
       });
    },
     //獲取地址信息，設置地址label
     getAddress(point){
      var gc = new BMap.Geocoder();
       
      gc.getLocation(point, (rs)=>{
        var addComp = rs.addressComponents;
        var address = addComp.province + addComp.city + addComp.district + addComp.street + addComp.streetNumber;//獲取地址
         
        //畫圖 ---》顯示地址信息
        var label = new BMap.Label(address,{offset:new BMap.Size(20,-10)});
        this.map.removeOverlay(this.mk.getLabel());//刪除之前的label
        this.address_detail = address;
        this.mk.setLabel(label);
         
       });
       
    },
    setPlace() {
    this.map.clearOverlays(); //清除地圖上所有覆蓋物
    var th = this
    function myFun() {
     th.userlocation = local.getResults().getPoi(0).point; //獲取第一個智能搜索的結果
     th.map.centerAndZoom(th.userlocation, 18);
     th.getMarker(th.userlocation);
    }
 
    var local = new BMap.LocalSearch(this.map, {
     onSearchComplete: myFun //智能搜索
    });
    local.search(this.address_detail);
   },
   search () {
       var localSearch = new BMap.LocalSearch(this.map);
       localSearch.enableAutoViewport(); //允許自動調節窗體大小
       this.searchByInputName(localSearch);
 },
   searchByInputName(localSearch) {
     this.map.clearOverlays(); //清空原來的標注
     var th = this;
     var keyword = this.address_detail;
     localSearch.setSearchCompleteCallback(function(searchResult) {
       var poi = searchResult.getPoi(0);
       th.userlocation = poi.point;
       th.map.centerAndZoom(poi.point, 13);
       th.getMarker(th.userlocation);
    });
     localSearch.search(keyword);
   },
   onCopy () {
     this.$message('內容已復制到剪貼板!');
   },
   onError () {
     this.$message('內容復制失敗,請重試!');
 
   }
     
 },
 mounted() {
  this.$nextTick(function() {
   this.drawMap();
  });
   
 }
};
</script>
<style scoped>
.allmap {
 width: 100%;
 height: 400px;
 font-family: "微軟雅黑";
 border: 1px solid green;
}
.el-tag {
 cursor: pointer;
}
</style>

看完上述內容是否對您有幫助呢？如果還想對相關知識有進一步的了解或閱讀更多相關文章，請關注億速云行業資訊頻道，感謝您對億速云的支持。