我如何从 google 地图位置 api 对象获取纬度和经度？

Question

如何从 google 地图位置 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) 得到一个 "Cannot read property 'latitude' of null"

Answer 1

我假设您正在使用 Vuetify Google Autocomplete。如果您没有 select 自动完成建议列表中的位置，您将得到一个空值。

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

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

然后按照以下步骤操作：

在文本字段中输入 "california"
Select 第一个选项，"California, USA" 来自地点预测列表
然后打开控制台，您应该会看到以下输出：

纬度：36.778261
液化天然气：-119.41793239999998

希望对您有所帮助！

我如何从 google 地图位置 api 对象获取纬度和经度？

how do i get the latitude and longitude from google maps places api object?

google-maps

vuejs2

google-places-api

vuetify.js