在 Hybrid 移動應用中使用 VueJs 實現谷歌地點

Question

我正在嘗試在混合移動應用程序中使用 vue js 實現對谷歌地點的搜索。 搜索功能工作正常，但是當我單擊地點列表時，我無法選擇其中任何一個。

我使用過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;
    }
  }
}

我已經添加了上面的示例代碼。 我沒有收到任何錯誤，但是當我在文本字段中輸入一些字符時，它會顯示地點列表，但我無法選擇其中任何一個。 但是相同的插件在瀏覽器上運行良好。

Answer 1

我的猜測是，由於兩次調用 Maps API，這些庫會相互沖突。 嘗試僅實施其中之一以排除這種情況。

這是我通過 Apache cordova 在混合應用程序中使vue-google-autocomplete在移動設備（Android）上運行的工作。

首先是一些上下文，我通過vue-cli-plugin-cordova創建了一個 vue +cordova 應用程序。

在/public/index.html ，在<head>元素中添加帶有有效API 密鑰的 Maps API 腳本：

<script src="https://maps.googleapis.com/maps/api/js?key=KEY&libraries=places"></script>

然后轉到/src/App.vue並用庫文檔示例中的代碼替換所有內容：

<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 密鑰是否確實有效，即它必須受到適當（未）限制並且屬於啟用了計費、JavaScript API 和 Places API 的 Cloud 項目。 更多信息請參閱此處的 Google 指南。

真的希望這對你有幫助！

在 Hybrid 移動應用中使用 VueJs 實現谷歌地點

問題描述

1 個解決方案

解決方案1
2 已采納 2019-08-24 07:45:56

在 Hybrid 移動應用中使用 VueJs 實現谷歌地點

問題描述

1 個解決方案

解決方案1 2 已采納 2019-08-24 07:45:56

解決方案1
2 已采納 2019-08-24 07:45:56