vue中百度地图的地区检索和地理编码配套使用方法

在 Vue 中使用百度地图的地区检索和地理编码，需要先引入百度地图 JavaScript API 的 SDK，然后再根据官方文档提供的 API 进行调用。

以下是一个简单的示例，演示了如何在 Vue 组件中使用百度地图 SDK 实现地区检索和地理编码：

<template>
  <div>
    <input type="text" v-model="searchKeyword" @keydown.enter="searchPlace">
    <button @click="geocodeAddress">地理编码</button>
    <div id="map-container"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      map: null,
      searchKeyword: '',
      geocoder: null,
    }
  },
  mounted() {
    // 加载地图 SDK
    const AK = '你的百度地图AK';
    const script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = `http://api.map.baidu.com/api?v=3.0&ak=${AK}&callback=initMap`;
    script.onerror = () => {
      console.error('加载地图 SDK 失败');
    };
    document.body.appendChild(script);

    // 初始化地理编码对象
    this.geocoder = new BMap.Geocoder();
  },
  methods: {
    // 地区检索
    searchPlace() {
      const local = new BMap.LocalSearch(this.map, {
        onSearchComplete: (results) => {
          if (local.getStatus() === BMAP_STATUS_SUCCESS) {
            if (results.getNumPois() > 0) {
              const poi = results.getPoi(0);
              this.map.centerAndZoom(poi.point, 17);
            }
          }
        }
      });
      local.search(this.searchKeyword);
    },
    // 地理编码
    geocodeAddress() {
      this.geocoder.getPoint(this.searchKeyword, (point) => {
        if (point) {
          this.map.centerAndZoom(point, 17);
        } else {
          alert('地址解析失败');
        }
      }, '中国');
    },
    // 初始化地图
    initMap() {
      this.map = new BMap.Map('map-container');
      this.map.centerAndZoom('北京', 11);
      this.map.enableScrollWheelZoom(true);
    }
  }
}
</script>

在这个示例中，我们在 `mounted` 钩子函数中动态加载百度地图 JavaScript API 的 SDK，然后在 `initMap` 方法中初始化地图对象。在 `searchPlace` 和 `geocodeAddress` 方法中分别进行地区检索和地理编码，并根据返回结果更新地图的中心点和缩放级别。最后，在模板中将地图容器和搜索关键字绑定到相应的数据中。

需要注意的是，百度地图 JavaScript API 的 SDK 是通过回调函数来进行初始化的，因此我们在引入 SDK 时需要将回调函数设置为 `initMap`，而 `initMap` 方法必须是全局函数，否则无法被回调。