在混合移动应用程序中使用 VueJs 实现 google 地方答案

【问题标题】：Implementation of google places using VueJs in Hybrid mobile application在混合移动应用程序中使用 VueJs 实现 google 地方
【发布时间】：2019-08-19 07:20:50
【问题描述】：

我正在尝试在混合移动应用程序中使用 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;
    }
  }
}

我已经添加了上面的示例代码。我没有收到任何错误，但是当我在文本字段中输入一些字符时，它会显示地点列表，但我无法选择其中任何一个。但同样的插件在浏览器上运行良好。

【问题讨论】：

您能否提供您获得的完整错误日志和您正在运行的示例代码？如果您在使用这两个库时都遇到问题，那么您的环境或 API 密钥可能有问题，但我们需要您提供更多信息才能提供帮助。
我已经添加了示例代码和关于我正在尝试做什么以及我得到什么的解释。
谢谢。我还不能在移动设备上测试你的代码，但是这些库确实可以在浏览器上运行。当您说您“无法选择”自动完成预测时，您的意思是您实际上无法从下拉列表中选择任何地方吗？一旦您将鼠标悬停在列表上，它们会消失吗？还是您单击一个但之后没有任何反应？可以发个截图吗？
地点列表是否会在一瞬间消失，或者在您将鼠标悬停在它们上方和/或单击某个地点之前它们会一直存在吗？如果您无法单击任何地方，是因为列表被冻结/无响应还是因为它消失了？完成后，您能否再次输入地址，然后自动完成预测列表会再次显示，还是根本不会出现？
此外，出于测试和故障排除目的，请尝试使用与文档中的库示例完全相同的代码。这个问题还是会发生吗？还是只有在使用自己的自定义代码时才会看到这种意外行为？

标签： javascript google-maps vue.js google-places-api quasar-framework

【解决方案1】：

我的猜测是，由于两次调用 Maps API，这些库相互冲突。尝试只实施其中一个来排除这种情况。

这是我为使 vue-google-autocomplete 通过 Apache cordova 在混合应用程序中的移动 (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 并将所有内容替换为库文档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 密钥是否确实有效，即它必须受到适当（无）限制并且属于启用了计费、JavaScript API 和 Places API 的云项目。更多信息在Google's guide here。

真的希望这对你有帮助！

【讨论】：

评论不用于扩展讨论；这个对话是moved to chat。