我正在尝试在混合移动应用程序中使用 vue js 实现 Google 地点的搜索。搜索功能工作正常，但当我单击地点列表时，我无法选择其中任何一个。
我用过vue-google-places图书馆和vue-google-autocomplete图书馆。在这两个库中我都面临着同样的问题。
<template>
<q-item>
<q-item-main>
<q-field :error="$v.serial.$error">
<VueGooglePlaces
api-key="api-key"
class="subheading"
:enable-geolocation="true"
types="(cities)"
@placechanged="onPlaceChanged"
>
<input
ref="address"
float-label="Serial Number"
type="text"
v-model="address"
clearable
@blur="$v.serial.$touch"
/>
</VueGooglePlaces>
<vue-google-autocomplete
id="map"
class="form-control"
placeholder="Start typing"
v-on:placechanged="getAddressData"
></vue-google-autocomplete>
</q-field>
</q-item-main>
</q-item>
</template>
import VueGoogleAutocomplete from "vue-google-autocomplete";
import Vue from "vue";
export default {
name: "ScanBarcodePage",
components: {
"page-title": PageTitleComponent
},
mounted() {
if (this.$refs.address) {
this.$refs.address.focus();
}
},
data() {
return {
address: "",
serial: "",
places: []
};
},
methods: {
getAddressData: function(addressData, placeResultData, id) {
this.address = addressData.formatted_address;
},
onPlaceChanged: function(addressData, placeResultData, id) {
this.address = addressData.formatted_address;
}
}
}
我已经在上面添加了示例代码。我没有收到任何错误，但是当我在文本字段中输入一些字符时，它会显示地点列表，但我无法选择其中任何一个。但同一个插件在浏览器上运行良好。
最佳答案
我的猜测是，由于两次调用 Maps API，这些库相互冲突。尝试仅实现其中一个来排除这种情况。
这是我所做的 vue-google-autocomplete通过 Apache cordova 在混合应用程序中在移动设备 (Android) 上工作。
首先，我通过 vue-cli-plugin-cordova 创建了一个 vue + cordova 应用程序.
在 /public/index.html ，使用 <head> 中的有效 API key 添加您的 Maps API 脚本元素:
<script src="https://maps.googleapis.com/maps/api/js?key=KEY&libraries=places"></script>
然后转到/src/App.vue并将所有内容替换为库文档 example 中的代码:
<template>
<div>
<h2>Your Address</h2>
<vue-google-autocomplete
ref="address"
id="map"
classname="form-control"
placeholder="Please type your address"
v-on:placechanged="getAddressData"
country="sg"
>
</vue-google-autocomplete>
</div>
</template>
<script>
import VueGoogleAutocomplete from 'vue-google-autocomplete'
export default {
components: { VueGoogleAutocomplete },
data: function () {
return {
address: ''
}
},
mounted() {
// To demonstrate functionality of exposed component functions
// Here we make focus on the user input
this.$refs.address.focus();
},
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;
}
}
}
</script>
然后插入设备(或模拟器)并运行您的应用程序。您应该能够毫无问题地从自动完成预测中选择一个地点。
如果仍然不能，请检查您的 API key 是否确实有效，即它必须受到适当(未)限制并且属于启用了计费、JavaScript API 和 Places API 的云项目。更多信息Google's guide here .
真心希望这对您有帮助!
关于javascript - 在混合移动应用程序中使用 VueJs 实现 Google Places，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57552080/