vue中引入百度地圖

 

 

xxx.vue

<template>
  <div>
    <el-input v-model="inputaddr">
    </el-input>
    <el-button @click="mapCpm">點擊</el-button>
    <el-dialog :modal-append-to-body="false"
               :title="textMap[dialogStatus]"
               :visible.sync="mapCPM">
      <baidu-map class="map"
                 :center="center"
                 :zoom="zoom"
                 @ready="handler"
                 :double-click-zoom='false'
                 :scroll-wheel-zoom='true'>
        <bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT"
                        :showAddressBar="true"
                        :autoLocation="true"
                        @locationSuccess='locationSuccess'></bm-geolocation>
        <bm-panorama></bm-panorama>
        <bm-marker :position="center"
                   @dragend="dragend"
                   :raiseOnDrag='true'
                   :dragging='true'>
        </bm-marker>
      </baidu-map>
      <el-row class="map_title">
        <el-col :span="20"
                class="map_title_span">
          <p>經度：{{locationdata.center ? locationdata.center.lng : center.lng}}</p>
          <p>緯度：{{locationdata.center ? locationdata.center.lat : center.lat}}</p>
          <p>地址：{{locationdata.addr}}</p>
        </el-col>

        <el-col :span="4">
          <el-button type="info"
                     size="small"
                     @click="getmapdamodata()">提交</el-button>
        </el-col>
      </el-row>
    </el-dialog>

  </div>
</template>
<script>
export default {
  data () {
    return {
      fullscreenLoading: false,//地圖加載動畫
      // 地圖初始化的位置
      center: { lng: 113.18088529892, lat: 23.460952009562 },
      // 地圖內的大小
      zoom: 15,
      // 這個是搜索下的東西
      location: '',
      // 這個是選擇搜索列表中數據的title以及經緯度
      locationdata: {
        title: '',
        center: '',
        addr: ''//地址
      },
      geolocation: "",
      BMap: '',
      textMap: {
        map: '地圖'
      },
      dialogStatus: 'map',
      mapCPM: false,
      inputaddr: ''
    }
  },
  mounted () {

  },
  methods: {
    // 由於百度地圖 JS API 只有 JSONP 一種加載方式，因此 BaiduMap 組件及其所有子組件的渲染只能是異步的。因此，請使用在組件的 ready 事件來執行地圖 API 加載完畢后才能執行的代碼，不要試圖在 vue 自身的生命周期中調用 BMap 類，更不要在這些時機修改 model 層。
    handler ({ BMap, map }) {
      const loading = this.$loading({//加載動畫
        lock: true,
        text: '動圖加載中',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });


      window.map = map; //注冊為全局
      var that = this;  // map方法中的this指向不對。所有申明一個。。小細節的東西
      // 剛進入頁面中的定位，需要向用戶授權
      var geolocation = new BMap.Geolocation();
      console.log(geolocation)
      this.geolocation = geolocation;
      geolocation.getCurrentPosition(() => {
        // console.log('data')
        // alert('nimamaipi')
      })
      geolocation.enableSDKLocation();
      geolocation.getCurrentPosition(function (r) {

        if (this.getStatus() == BMAP_STATUS_SUCCESS) {
          // 把得到的經緯度傳給map，就實現了第一步我們的定位
          that.center = {
            lng: r.point.lng,
            lat: r.point.lat
          }
          console.log("wang", r)
          // var a = r.address.city
          // var b = r.address.district
          // var c = r.address.province
          // var d = r.address.street
          // var e = r.address.street_number

          // console.log(a);
          // console.log(b);
          // console.log(c);
          // console.log(d);
          // console.log(e);

          // var f = ''
          // this.locationdata.addr = ''
          // f = a + b + c + d + e
          // this.locationdata.addr = f
          // console.log(f);

          // this.locationdata.addr = r.address.city + r.address.district + r.address.province + r.address.street + r.address.street_number
          //   當用戶拒絕該授權的時候，依然執行
          if (r.accuracy == null) {
            // alert('accuracy null:'+r.accuracy);
            //用戶決絕地理位置授權
            return;
          }
        } else {
          console.log('failed' + this.getStatus());
        }
      }, { enableHighAccuracy: true })
      this.BMap = BMap
      loading.close();
    },
    mapCpm () {
      //打開地圖彈窗
      this.dialogStatus = 'map'
      this.mapCPM = true
    },
    locationSuccess (point, AddressComponent, marker) {
      //定位成功后
      console.log(point);
      this.locationdata.center = point.point
      this.locationdata.addr = point.addressComponent.city + point.addressComponent.district + point.addressComponent.province + point.addressComponent.street + point.addressComponent.streetNumber
      this.center = point.point
    },
    //   選擇localtion的值
    // getlocalsearch (e) {
    //   this.locationdata.title = e.address + e.title;
    //   this.locationdata.center = e.point;
    // },
    dragend (type, target, pixel, point) { //拖拽結束觸發
      this.locationdata.center = type.point;
      // this.position = type.point
      const _this = this
      const gc = new this.BMap.Geocoder()
      gc.getLocation(type.point, function (rs) {
        console.log("aaaaaaaaaaaaaaa", rs)
        _this.locationdata.addr = rs.address
      })
    },
    // 確定該信息然后存在session中
    getmapdamodata () {
      this.inputaddr = this.locationdata.addr
      this.mapCPM = false
    }

  }
} 
</script>
<style>
.map {
  width: 100%;
  height: 500px;
}
.anchorBL {
  display: none;
}
.map_title {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.1533rem;
}
</style>

 

 main.js

import BaiduMap from 'vue-baidu-map'

Vue.use(BaiduMap, {
  // ak 是在百度地圖開發者平台申請的密鑰 詳見 http://lbsyun.baidu.com/apiconsole/key */
  ak:  '百度ak'
});

 

 

 

 

 

 

 

更新

 

 

 

<template>
  <div>

    <el-button @click="mapCpm">點擊</el-button>
    <el-dialog :modal-append-to-body="false"
               :title="textMap[dialogStatus]"
               :visible.sync="mapCPM">

      <baidu-map class="map"
                 :center="center"
                 :zoom="zoom"
                 @ready="handler"
                 :double-click-zoom='false'
                 :scroll-wheel-zoom='true'
                 @click="clickBaiDuMap">



        <bm-view class="map"></bm-view>
        <bm-control :offset="{width: '10px', height: '10px'}">
          <bm-auto-complete v-model="keyword"
                            :sugStyle="{zIndex: 0}">
            <el-input placeholder="請輸入地名關鍵字"
                      v-model="keyword"></el-input> <!-- 這里指代一個自定義搜索框組件 -->
            <bm-local-search :keyword="keyword"
                             :auto-viewport="true"
                             style="width:0px;height:0px;opacity:0"></bm-local-search>

          </bm-auto-complete>
        </bm-control>





        <bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT"
                        :showAddressBar="true"
                        :autoLocation="true"
                        @locationSuccess='locationSuccess'></bm-geolocation>
        <bm-panorama></bm-panorama>
        <bm-marker :position="locationdata.center"
                   @dragend="dragend"
                   :raiseOnDrag='true'
                   :dragging='true'>
        </bm-marker>
      </baidu-map>
      <el-row class="map_title">
        <el-col :span="20"
                class="map_title_span">
          <p>經度：{{locationdata.center ? locationdata.center.lng : center.lng}}</p>
          <p>緯度：{{locationdata.center ? locationdata.center.lat : center.lat}}</p>
          <p>地址：{{locationdata.addr}}</p>
        </el-col>

        <el-col :span="4">
          <el-button type="info"
                     size="small"
                     @click="getmapdamodata()">提交</el-button>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data () {
    return {
      keyword: '',
      city: '',//輸入框搜索內容
      address_detail: null, //詳細地址
      fullscreenLoading: false,//地圖加載動畫
      // 地圖初始化的位置
      center: { lng: 113.18088529892, lat: 23.460952009562 },
      // 地圖內的大小
      zoom: 15,
      // 這個是搜索下的東西
      location: '',
      // 這個是選擇搜索列表中數據的title以及經緯度
      locationdata: {
        title: '',
        center: '',
        addr: ''//地址
      },
      geolocation: "",
      BMap: '',
      textMap: {
        map: '地圖'
      },
      dialogStatus: 'map',
      mapCPM: false,
      inputaddr: ''
    }
  },
  mounted () {

  },
  methods: {
    // 由於百度地圖 JS API 只有 JSONP 一種加載方式，因此 BaiduMap 組件及其所有子組件的渲染只能是異步的。因此，請使用在組件的 ready 事件來執行地圖 API 加載完畢后才能執行的代碼，不要試圖在 vue 自身的生命周期中調用 BMap 類，更不要在這些時機修改 model 層。
    handler ({ BMap, map }) {
      const loading = this.$loading({//加載動畫
        lock: true,
        text: '動圖加載中',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });


      window.map = map; //注冊為全局
      var that = this;  // map方法中的this指向不對。所有申明一個。。小細節的東西
      // 剛進入頁面中的定位，需要向用戶授權
      var geolocation = new BMap.Geolocation();
      console.log(geolocation)
      this.geolocation = geolocation;
      geolocation.getCurrentPosition(() => {
        // console.log('data')
        // alert('nimamaipi')
      })
      geolocation.enableSDKLocation();
      geolocation.getCurrentPosition(function (r) {

        if (this.getStatus() == BMAP_STATUS_SUCCESS) {
          // 把得到的經緯度傳給map，就實現了第一步我們的定位
          that.center = {
            lng: r.point.lng,
            lat: r.point.lat
          }
          console.log("wang", r)

          var a = r.address.city
          var b = r.address.district
          var c = r.address.province
          var d = r.address.street
          var e = r.address.street_number

          console.log(a);
          console.log(b);
          console.log(c);
          console.log(d);
          console.log(e);

          var f = ''
          //this.locationdata.addr = ''
          f = a + b + c + d + e
          window.title = f;//注冊為全局
          // this.locationdata.addr = f
          console.log(f);
          // this.locationdata.addr = r.address.city + r.address.district + r.address.province + r.address.street + r.address.street_number
          //   當用戶拒絕該授權的時候，依然執行
          if (r.accuracy == null) {
            // alert('accuracy null:'+r.accuracy);
            //用戶決絕地理位置授權
            return;
          }
        } else {
          console.log('failed' + this.getStatus());
        }
      }, { enableHighAccuracy: true })
      this.BMap = BMap
      loading.close();
    },
    mapCpm () {
      //打開地圖彈窗
      setTimeout(() => {
        if (window.title != '' && window.title != null) {
          this.locationdata.addr = window.title
          window.title = ''
        }
      }, 1000)

      console.log(window.title);


      this.dialogStatus = 'map'
      this.mapCPM = true
    },
    locationSuccess (point, AddressComponent, marker) {
      //定位成功后
      console.log(point);
      this.locationdata.center = point.point
      this.locationdata.addr = point.addressComponent.city + point.addressComponent.district + point.addressComponent.province + point.addressComponent.street + point.addressComponent.streetNumber
      this.center = point.point
    },
    //   選擇localtion的值
    // getlocalsearch (e) {
    //   this.locationdata.title = e.address + e.title;
    //   this.locationdata.center = e.point;
    // },
    dragend (type, target, pixel, point) { //拖拽結束觸發
      this.locationdata.center = type.point;
      // this.position = type.point
      const _this = this
      const gc = new this.BMap.Geocoder()
      gc.getLocation(type.point, function (rs) {
        console.log("aaaaaaaaaaaaaaa", rs)
        _this.locationdata.addr = rs.address
      })
    },
    // 確定該信息然后存在session中
    getmapdamodata () {
      this.inputaddr = this.locationdata.addr
      this.mapCPM = false
    },
    clickBaiDuMap (type, target, point, pixel, overlay) {
      console.log(type);
      console.log(target); console.log(point); console.log(pixel); console.log(overlay);
      this.locationdata.center = type.point;
      // this.center = type.point
      // this.position = type.point
      const _this = this
      const gc = new this.BMap.Geocoder()
      gc.getLocation(type.point, function (rs) {
        console.log("aaaaaaaaaaaaaaa", rs)
        _this.locationdata.addr = rs.address
      })
    },


  }
} 
</script>
<style scoped>
.map {
  width: 100%;
  height: 500px;
}
.anchorBL {
  display: none;
}
.map_title {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.1533rem;
}
</style>