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

我正在尝试使用VUEJS提到的Google API渲染Google API。我可以使用普通的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>

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

我看到的一个错误是您如何使用geocodeAddress。

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

并使用this.geocodeAddress调用GeoCodeadDress，因为它被定义为VUE方法

    document.getElementById('submit').addEventListener('click', () => {
        this.geocodeAddress(geocoder, map);
    });

当您导入此脚本https://maps.googleapis.com/maps/api/js?key=APIkey&callback=initMap(注意callback=initMap(时，您告诉Google Map，加载脚本后，调用称为InitMap的函数。此功能需要在全球范围内。但是目前它在VUE实例中。

因此，您必须从脚本标签中删除callback=initMap。并仅在需要时自己调用 initMap函数。

对于例如，在安装地图组件时将其调用

mounted() {
  this.initMap();
}

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

将以下行添加到您的组件：
```
mounted: function () {
  var self = this
  // makes the function initMap global available under the vue scope
  window.initMap = function () { self.initMap() }
}
```
并且不要删除gmaps加载脚本的"回调= initmap"一部分！您应该在initmaps函数中添加一个 geocodeAddress(geocoder, maps)之前：
document.getElementById('submist'(。addeventListener('click'，function(({ 此 .geocodeaddress(地图(; }(;
更复杂的选项：像我在此处描述的那样，加载gmaps api脚本，https://stackoverflow.com/a/45605316/6355502，并按照1。

ps：有线条

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

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

相关内容

最新更新

热门标签：