Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/471.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript vue.js中未显示Google地图_Javascript_Google Maps_Cordova_Vue.js_Monaca - Fatal编程技术网

Javascript vue.js中未显示Google地图

Javascript vue.js中未显示Google地图,javascript,google-maps,cordova,vue.js,monaca,Javascript,Google Maps,Cordova,Vue.js,Monaca,我有一个基于Vue.js的应用程序,使用Monaca、Cordova和onsenUI。我想在我的页面中使用谷歌地图显示我的位置。为了实现这一点,我使用了npm包vue2谷歌地图,但它没有显示任何内容 我使用的代码来自软件包的官方文档。详情如下: <template> <v-ons-page> <custom-toolbar>Page 1</custom-toolbar> <div>

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

我使用的代码来自软件包的官方文档。详情如下:

    <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>

第1页
从“vue2谷歌地图”导入*作为VueLogleMaps;
从“Vue”导入Vue;
Vue.use(VueLogleMaps{
负载:{
关键字:“AIzaSyDX3SEHwFUY-KJP7YMP0-uTvo7up-paXM”,
v:‘3.26’,
//库:'places',///如果需要使用place输入
}
});
导出默认值{
数据(){
返回{
中心:{lat:10.0,lng:10.0},
标记:[{
位置:{lat:10.0,lng:10.0}
}, {
位置:{lat:11.0,lng:11.0}
}]
}
},
道具:['pageStack'],
组件:{customToolbar}
};

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

missing;在style=“宽度:500px;高度:300px;”、、、中,缺少:在v-for=“(m,索引)在标记中”。。所以,请检查一下,如果我添加分号“:”@scaisEdge,它将显示无效的表达式