谷歌地图未在 vue.js 中显示

Posted

技术标签:

【中文标题】谷歌地图未在 vue.js 中显示【英文标题】:Google map is not showing in vue.js 【发布时间】:2018-02-18 15:40:48 【问题描述】:

我使用 Monaca、Cordova 和 onsenUI 构建了一个基于 Vue.js 的应用程序。我想在我的页面中使用谷歌地图显示我的位置。为了实现这一点,我使用了 npmvue2-google-maps 但它没有显示任何内容。

我使用的代码来自包的官方文档。它们如下所示:

    <template>
      <v-ons-page>
        <custom-toolbar>Page 1</custom-toolbar>
        <div>
       <gmap-map
        :center="center"
        :zoom="7"
        style="width: 500px; height: 300px"
       >
        <gmap-marker
          :key="index"
          v-for="(m, index) in markers"
          :position="m.position"
          :clickable="true"
          :draggable="true"
          @click="center=m.position"
        ></gmap-marker>
      </gmap-map>
      </div>
      </v-ons-page>
    </template>
    <script>
    import * as VueGoogleMaps from 'vue2-google-maps';
      import Vue from 'vue';

      Vue.use(VueGoogleMaps, 
        load: 
          key: 'AIzaSyDX3SEHwFUY-k_Jp7YMp0-uTvo7up-paXM',
          v: '3.26',
          // libraries: 'places', //// If you need to use place input
        
      );

      export default 
        data () 
          return 
            center: lat: 10.0, lng: 10.0,
            markers: [
              position: lat: 10.0, lng: 10.0
            , 
              position: lat: 11.0, lng: 11.0
            ]
          
        ,


         props: ['pageStack'],
         components:  customToolbar 

     ;
    </script>

【问题讨论】:

缺失;在样式 =“宽度:500 像素;高度:300 像素;” ,,, missing : in v-for="(m, index) in markers" .. 所以检查你的 sintax 如果我添加分号':'@scaisEdge,它会显示无效的表达式 【参考方案1】:

对于遇到此问题的任何人,请查看此issue。基本上,您这边没有任何变化,只需设置地图元素的高度即可。

【讨论】:

以上是关于谷歌地图未在 vue.js 中显示的主要内容,如果未能解决你的问题,请参考以下文章

android - 谷歌地图未在某些设备上显示

无法在 vue cli 组件上显示谷歌地图

如何通过对vue js中的每个搜索结果使用模态在谷歌地图上显示json数据获得的纬度和经度?

谷歌地图信息窗口未正确显示

谷歌地图上的自定义标记

谷歌地图未在 js 选项卡中加载