vue实现输入地址

Vue 实现输入地址功能

在 Vue 中实现输入地址功能，可以通过结合表单输入、地图 API（如高德、百度或 Google Maps）以及地址自动补全等方式完成。以下是几种常见方法：

使用高德地图 API 实现地址输入

注册高德地图开发者账号并获取 API Key，引入高德地图的 JavaScript SDK。

<template>
  <div>
    <input 
      v-model="address" 
      @input="searchAddress" 
      placeholder="请输入地址"
    />
    <div id="map-container"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      address: '',
      map: null,
      autoComplete: null
    };
  },
  mounted() {
    this.initMap();
  },
  methods: {
    initMap() {
      const script = document.createElement('script');
      script.src = `https://webapi.amap.com/maps?v=2.0&key=你的高德APIKey`;
      script.onload = () => {
        this.map = new AMap.Map('map-container');
        this.autoComplete = new AMap.AutoComplete({
          input: 'address'
        });
      };
      document.head.appendChild(script);
    },
    searchAddress() {
      if (this.address.length > 2) {
        AMap.plugin('AMap.PlaceSearch', () => {
          const placeSearch = new AMap.PlaceSearch();
          placeSearch.search(this.address, (status, result) => {
            if (status === 'complete') {
              console.log(result);
            }
          });
        });
      }
    }
  }
};
</script>

使用百度地图 API 实现地址输入

类似高德地图，注册百度地图开发者账号并获取 API Key。

<template>
  <div>
    <input 
      v-model="address" 
      @input="searchAddress" 
      placeholder="请输入地址"
    />
    <div id="map-container"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      address: '',
      map: null
    };
  },
  mounted() {
    this.initMap();
  },
  methods: {
    initMap() {
      const script = document.createElement('script');
      script.src = `https://api.map.baidu.com/api?v=3.0&ak=你的百度APIKey&callback=initBaiduMap`;
      window.initBaiduMap = () => {
        this.map = new BMap.Map('map-container');
        const localSearch = new BMap.LocalSearch(this.map);
        localSearch.setSearchCompleteCallback((result) => {
          console.log(result);
        });
      };
      document.head.appendChild(script);
    },
    searchAddress() {
      if (this.address.length > 2) {
        const localSearch = new BMap.LocalSearch(this.map);
        localSearch.search(this.address);
      }
    }
  }
};
</script>

使用 Google Maps API 实现地址输入

注册 Google Cloud 账号并启用 Maps JavaScript API 和 Places API。

<template>
  <div>
    <input 
      v-model="address" 
      @input="searchAddress" 
      placeholder="请输入地址"
      ref="addressInput"
    />
    <div id="map-container"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      address: '',
      map: null,
      autocomplete: null
    };
  },
  mounted() {
    this.initMap();
  },
  methods: {
    initMap() {
      const script = document.createElement('script');
      script.src = `https://maps.googleapis.com/maps/api/js?key=你的GoogleAPIKey&libraries=places`;
      script.onload = () => {
        this.autocomplete = new google.maps.places.Autocomplete(
          this.$refs.addressInput
        );
        this.autocomplete.addListener('place_changed', () => {
          const place = this.autocomplete.getPlace();
          console.log(place);
        });
      };
      document.head.appendChild(script);
    },
    searchAddress() {
      if (this.address.length > 2) {
        const service = new google.maps.places.PlacesService(this.map);
        service.textSearch({ query: this.address }, (results) => {
          console.log(results);
        });
      }
    }
  }
};
</script>

使用第三方地址选择组件

如果不想直接调用地图 API，可以使用第三方 Vue 组件如 vue-address-picker。

安装组件：

npm install vue-address-picker

使用示例：

<template>
  <vue-address-picker v-model="address" />
</template>

<script>
import VueAddressPicker from 'vue-address-picker';

export default {
  components: {
    VueAddressPicker
  },
  data() {
    return {
      address: ''
    };
  }
};
</script>

注意事项

• 确保在项目中正确引入地图 API 的 SDK。
• 替换代码中的 API Key 为实际申请的密钥。
• 根据需求调整地图的显示样式和交互逻辑。
• 注意 API 的调用频率限制，避免频繁请求。