Question

我正在尝试将谷歌地图从Google Maps API引入我的Vue.js应用程序。我检索了生成的API密钥，我正在尝试显示地图。当我运行应用程序时，Atom抛出一个找不到模块的错误消息，浏览器显示：Can't resolve 'https://maps.googleapis.com/maps/api/js?key=MYAPIKEY&callback=initMap' in 'C:\Atom Projects\Project\client\src\components'知道我做错了什么吗？

MyComponent.vue

<template>
  <div>    
  <div id="map">
  </div>
  </div>
</template>

<script>
  function initMap () {
    var options = {
      zoom: 8,
      center:{lat:39.9612,lng:-82.9988}
    }

    var map = new google.maps.Map(document.getElementById('map'), options);
  }
</script>

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

<style>
  #map{
    height: 400px;
    width: 100%;
  }
</style>

浏览器出现完全错误

./src/components/MyComponent.vue
Module not found: Error: Can't resolve 'https://maps.googleapis.com/maps/api/js?key=MYAPIKEY&callback=initMap' in 'C:\Atom Projects\MyProject\client\src\components'
 @ ./src/components/MyComponent.vue 8:0-131 9:0-144
 @ ./src/router/index.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://localhost:8081 webpack/hot/dev-server ./src/main.js

Answer 1

您无法将外部<script>添加到单个文件组件中。

像你这样的案例的常用方法是使用集成了vue和谷歌地图的众多库中的一个。

其中一些库提供了新的自定义元素供您使用：

xkjyeah/vue-google-maps会创建<gmap-map>;
Akryum/vue-googlemaps创建<googlemaps-map>;
GuillaumeLeclerc/vue-google-maps创建<map>。

所有这些都有设置键和实例化地图的简单细节。有关示例和用法，请参阅其页面。

采用更低级别方法的另一个方法是Js-GoogleMapsLoader。我并不是说这个比其他人好 - 总体来说那些特定于vue的东西可能会让你在长远来看更容易整合 - 但是因为它没有Vue的例子，这里＆＃ 39;如何使用它：

运行npm install --save google-maps

将 MyComponent.vue 更改为：

<template>
  <div>    
  <div id="map">
  </div>
  </div>
</template>

<script>
import GoogleMapsLoader from 'google-maps'

export default {

  mounted: function () {
    GoogleMapsLoader.KEY = 'qwertyuiopasdfghjklzxcvbnm';
    GoogleMapsLoader.load(function(google) {
      var options = {
        zoom: 8,
        center:{ lat: 39.9612, lng: -82.9988 }
      }

      var map = new google.maps.Map(document.getElementById('map'), options);
    });
  }
}
</script>

<style>
  #map{
    height: 400px;
    width: 100%;
  }
</style>

以上所有选项都不需要额外的<script>代码。

使用谷歌地图

1 个答案: