vue高德地图如何将地址转换成坐标

Vue高德地图可以通过调用高德地图JavaScript API中的`AMap.Geocoder`对象来将地址转换成坐标。具体步骤如下：

1. 在Vue组件中引入高德地图JavaScript API

<script src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值"></script>

2. 在Vue组件中创建地图

<template>
  <div id="map"></div>
</template>

<script>
export default {
  mounted() {
    // 创建地图
    const map = new AMap.Map('map', {
      zoom: 10,
      center: [116.39, 39.9],
    })
  },
}
</script>

3. 调用`AMap.Geocoder`对象的`getLocation`方法将地址转换成坐标

<template>
  <div>
    <input type="text" v-model="address" />
    <button @click="search">搜索</button>
    <div id="map"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      address: '',
      map: null,
      marker: null,
    }
  },
  mounted() {
    // 创建地图
    this.map = new AMap.Map('map', {
      zoom: 10,
      center: [116.39, 39.9],
    })
  },
  methods: {
    search() {
      const geocoder = new AMap.Geocoder({
        city: '北京',
        radius: 1000,
      })
      geocoder.getLocation(this.address, (status, result) => {
        if (status === 'complete' && result.info === 'OK') {
          const location = result.geocodes[0].location
          this.map.setCenter(location)
          if (this.marker) {
            this.marker.setPosition(location)
          } else {
            this.marker = new AMap.Marker({
              position: location,
              map: this.map,
            })
          }
        } else {
          console.error(`地址解析失败：${status},${result.info}`)
        }
      })
    },
  },
}
</script>

在这个例子中，我们使用`AMap.Geocoder`对象的`getLocation`方法将用户输入的地址转换成坐标，并在地图上标注出来。需要注意的是，`AMap.Geocoder`对象需要传入城市名称和搜索半径两个参数。如果不传入这两个参数，默认使用当前地图中心点所在城市和1000米的搜索半径。