在VUE中使用vue-baidu-map获取经纬度和搜索地址

在Vue中使用vue-baidu-map获取经纬度和搜索地址可以通过以下步骤实现：

1. 安装vue-baidu-map：

npm install vue-baidu-map --save

2. 在Vue项目中引入并使用vue-baidu-map：

// main.js 或者其他的入口文件
import Vue from 'vue'
import BaiduMap from 'vue-baidu-map'
 
Vue.use(BaiduMap, {
  ak: '你的百度地图ak' // 这里填写你的百度地图ak
})

3. 在组件中使用vue-baidu-map获取经纬度和搜索地址：

<template>
  <div>
    <baidu-map class="map" @ready="handlerMapReady">
      <bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="true" @locationSuccess="getLocationSuccess"></bm-geolocation>
      <bm-local-search :keyword="keyword" @results="getLocalSearchResults"></bm-local-search>
    </baidu-map>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      keyword: '',
      map: null,
      location: null
    }
  },
  methods: {
    handlerMapReady({ BMap, map }) {
      this.map = map;
    },
    getLocationSuccess(position) {
      this.location = position.point;
      this.map.panTo(this.location);
    },
    getLocalSearchResults(results) {
      if (results.type === 'poiList') {
        this.location = results.poiList.pois[0].point;
        this.map.panTo(this.location);
      }
    }
  }
}
</script>
 
<style>
.map {
  width: 100%;
  height: 500px;
}
</style>

在这个例子中，我们使用了两个组件bm-geolocation和bm-local-search。bm-geolocation用于获取当前位置的经纬度，并可以显示地址栏供用户输入。bm-local-search用于搜索地址并获取结果的经纬度。

请确保你已经在百度地图开放平台申请了一个ak，并替换掉你的百度地图ak。

这样，当你访问这个Vue组件时，它会加载地图，并在用户同意位置权限后显示用户的当前位置，同时允许用户输入搜索关键字以搜索附近的地址。搜索结果会将地图中心定位到找到的第一个结果的位置。