在 Laravel 中使用 vue.js 从谷歌位置自动完成获取纬度和经度

Posted 2023-02-16

【中文标题】在 Laravel 中使用 vue.js 从谷歌位置自动完成获取纬度和经度

【英文标题】：Get Latitude and Longitude from google location autocomplete using vue.js in Laravel

【发布时间】：2020-12-14 09:42:42

【问题描述】：

我正在使用谷歌自动完成并获取位置数据，但我也想获取城市、国家和州名的纬度和经度。

<vue-google-autocomplete
    id="map"
    classname="form-control"
    placeholder="Start typing"
    v-on:placechanged="getAddressData"
    v-model="form.address"
>
</vue-google-autocomplete>


 getAddressData: function (addressData, placeResultData, id) 
            this.address = addressData;
            console.log(placeResultData.geometry.location.lat);
            console.log(placeResultData.geometry.location.lng);
        

【问题讨论】：

您记录到控制台的 placeData 的当前输出是什么。它是完全不正确还是返回一些有用的数据，而不是 long + lat？

@Jordan：返回1级行政区等信息数组

【参考方案1】：

应该这样做，lat 和 long 放在 addressData 上，而不是放在 placeResultData 上，在那里你有与该地址相关的地点的信息。

getAddressData: function (addressData, placeResultData, id) 
    this.address = addressData;

    console.log(addressData.longitude);
    console.log(addressData.latitude;

    this.form.address = addressData.route + ', ' + addressData.postal_code + ', ' + addressData.administrative_area_level_2 + ', ' + addressData.country;
  

另外，我认为这里使用 v-model 没有多大意义，相反，您应该将地址直接存储在 getAddressData 函数中。

<vue-google-autocomplete
    id="map"
    classname="form-control"
    placeholder="Start typing"
    v-on:placechanged="getAddressData"
>
</vue-google-autocomplete>

【讨论】：

谢谢它正在工作，我也正在获取状态，但它以简短的形式工作，你能告诉我如何获得状态的长名称。