Question

我正在尝试使用VueJS渲染地理编码服务google api提到here。我可以使用普通的Javascript和HTML做同样的事情，但不能使用VueJS做同样的事情。我不知道如何使用VueJS渲染它。

这是我的index.html代码：

<!-- index.html -->

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>VueJS NodeJS and Express example</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  </head>
  <body>
    <div id="app"></div>
    <script src="bundle.js"></script>
    <script async defer
    <script src="https://maps.googleapis.com/maps/api/js?key=APIkey&callback=initMap"></script>
    </script>
  </body>
</html>

这是我的MapItem.vue文件：

<template>
  <div>
    <h1>Mapping api</h1>
    <div id="floating-panel">
      <input id="address" type="textbox" value="Sydney, NSW">
      <input id="submit" type="button" value="Geocode">
    </div>
    <div id="map"></div>
</div>
</template>
<script>
export default {
  data(){
        return{
          item:{}
        }
    },
    methods: {

    initMap() {
        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 8,
          center: {lat: -34.397, lng: 150.644}
        });
        var geocoder = new google.maps.Geocoder();

        document.getElementById('submit').addEventListener('click', function() {
          geocodeAddress(geocoder, map);
        });
      },
      geocodeAddress(geocoder, resultsMap) {
        var address = document.getElementById('address').value;
        geocoder.geocode({'address': address}, function(results, status) {
          if (status === 'OK') {
            resultsMap.setCenter(results[0].geometry.location);
            var marker = new google.maps.Marker({
              map: resultsMap,
              position: results[0].geometry.location
            });
          } else {
            alert('Geocode was not successful for the following reason: ' + status);
          }
        });
      }
}
}
</script>

<style>

      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #map {
        height: 100%;
      }
      /* Optional: Makes the sample page fill the window. */
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #floating-panel {
        position: absolute;
        top: 10px;
        left: 25%;
        z-index: 5;
        background-color: #fff;
        padding: 5px;
        border: 1px solid #999;
        text-align: center;
        font-family: 'Roboto','sans-serif';
        line-height: 30px;
        padding-left: 10px;
      }

</style>

运行时，我的本地服务器上没有呈现任何内容。有什么想法吗？

Answer 1

我看到的一个错误就是你如何使用very-dev。

使用箭头函数geocodeAddress进行事件侦听器回调，以便您可以使用()=>{}作为回调中的组件实例。

使用this调用geocodeAddress，因为它被定义为Vue方法

this.geocodeAddress

当您导入此脚本document.getElementById('submit').addEventListener('click', () => { this.geocodeAddress(geocoder, map); });时（请注意https://maps.googleapis.com/maps/api/js?key=APIkey&callback=initMap），您告诉谷歌地图，在加载脚本后，调用一个名为initMap的函数。此功能需要在全局范围内。但目前它在Vue实例中。

所以你必须从脚本标签中删除callback=initMap。并且只在您需要时自己调用callback=initMap函数。

例如，在安装地图组件时调用它

initMap

Answer 2

你的问题是gmaps api和你的组件无法对话。最简单的解决方案：

将以下行添加到您的组件中：
```
mounted: function () {
  var self = this
  // makes the function initMap global available under the vue scope
  window.initMap = function () { self.initMap() }
}
```
并且不要删除＆＃34; callback = initMap＆＃34;你的gmaps加载脚本的一部分！你应该在initMaps函数中geocodeAddress(geocoder, maps)之前添加一个：

document.getElementById（＆＃39; submit＆＃39;）。addEventListener（＆＃39; click＆＃39;，function（）{ 这个 .geocodeAddress（地址，地图）; }）;
更复杂的选项：使用我在此处描述的vue https://stackoverflow.com/a/45605316/6355502加载gmaps api脚本，并按照1中所述进行操作。

PS：有行

 <script async defer
 <script src="https://maps.googleapis.com/maps/api/js?key=APIkey&callback=initMap"></script>

在您的代码中，请删除第一行。

如何在vuejs中使用Google的地理编码服务api？

2 个答案: