Vue Baidu Map百度地图定位当前位置_vue页面展示百度地图并获取定位

<template>

  <div>

    <baidu-map

      class="map"

      @ready="handler"

      style="height: 500px;"

      :center="center"

      :zoom="15"

      :map-click="false"

      ak="ug2vkDRbX17m76RVbIjkTXBOK46OBnkg"

    >

      <div>

        <bm-marker

          :dragging="true"

          animation="BMAP_ANIMATION_BOUNCE"

          :position="center"

          @dragend="dragend"

        >213</bm-marker>

      </div>

    </baidu-map>

  </div>

</template>

 

<script>

import {

  BaiduMap,

  BmControl,

  BmView,

  BmAutoComplete,

  BmLocalSearch,

  BmMarker,

  BmGeolocation

} from "vue-baidu-map";

export default {

  components: {

    BaiduMap,

    BmControl,

    BmView,

    BmAutoComplete,

    BmLocalSearch,

    BmMarker,

    BmGeolocation

  },

  data() {

    return {

      center: {}

    };

  },

  methods: {

    handler: function({ BMap, map }) {

      map.enableScrollWheelZoom(true); //开启滚轮缩放

      // map.centerAndZoom('青岛市', 13)

      const hide = alert("正在获取当前省市请稍候..", 0);

      const _this = this;

      const geolocation = new BMap.Geolocation();

      geolocation.getCurrentPosition(

        function(r) {

          setTimeout(hide, 1000);

          console.log(r);

          _this.center = { lng: r.longitude, lat: r.latitude }; // 设置center属性值

          // _this.autoLocationPoint = { lng: r.longitude, lat: r.latitude }        // 自定义覆盖物

          _this.initLocation = true;

        },

        { enableHighAccuracy: true }

      );

 

      window.map = map;

      // 赋值，方便调用，本节被用到

      this.BMap = BMap;

      this.map = map;

    },

    // 拖动结束后

    dragend(e) {

      this.position = e.point;

      const _this = this;

      console.log(e.point);

      console.log(this.position);

      const gc = new this.BMap.Geocoder();

      gc.getLocation(e.point, function(rs) {

        console.log(rs);

        // var addComp = rs.addressComponents

        // this.addr = addComp.province + ', ' + addComp.city + ', ' + addComp.district + ', ' + addComp.street + ', ' + addComp.streetNumber

        _this.addr = rs.address;

      });

    }

  }

};

</script>

 

<style>

</style>