时间戳

首页 > 解决方案 > 我如何从谷歌地图的地方 api 对象中获取纬度和经度？

google-maps - 我如何从谷歌地图的地方 api 对象中获取纬度和经度？

问题描述

如何从 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) 得到“无法读取属性‘纬度’为空”

标签： google-mapsvuejs2google-places-apivuetify.js

解决方案

我假设您正在使用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);
  }
}

然后按照以下步骤操作：

  1. 在文本字段中输入“加利福尼亚”
  2. 从地点预测列表中选择第一个选项“美国加利福尼亚州”

  3. 然后打开控制台，您应该会看到以下输出：

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

希望这可以帮助！

推荐阅读