Question

如何从Google Maps Places API中的地址数据中获取经纬度坐标？

模板

      <vuetify-google-autocomplete
        outline
        id="address"
        types="geocode"
        append-icon="map"
        placeholder="WHERE"
        label="postcode or city"
        v-model="location"
        v-on:placechanged="getAddressData"
      >
      </vuetify-google-autocomplete>

脚本：

  methods: {
    /**
    * When the location found
    * @param {Object} addressData Data of the found location
    * @param {Object} placeResultData PlaceResult object
    * @param {String} id Input container ID
    */
    getAddressData: function (addressData, placeResultData, id) {
        this.address = addressData;
        console.log(addressData)
    },

}

我在控制台中得到一个addressData对象，如下所示：

{...}
administrative_area_level_1: (...)
country: (...)
latitude: 39.1910983
locality: (...)
longitude: (...)
name: (...)
photos: (...)
place_id: (...)
postal_code: (...)

console.log（addressData.latitude）获得“无法读取null的'latitude'属性”

Answer 1

我假设您使用的是Vuetify Google Autocomplete。如果您未从“自动填充建议”列表中选择位置，则会得到一个空值。

尝试在您的getAddressData函数中添加以下代码：

getAddressData: function(addressData, placeResultData, id) {
  this.address = addressData;
  if (addressData !== null) {
    console.log("lat: " + addressData.latitude);
    console.log("lng: " + addressData.longitude);
  }
}

然后按照以下步骤操作：

在文本字段中输入“加利福尼亚”
从地点预测列表中选择第一个选项“美国加利福尼亚”
然后打开控制台，您应该看到以下输出：

lat：36.778261
lng：-119.41793239999998

希望这会有所帮助！

如何从Google Maps Places api对象获取经度和纬度？

1 个答案: