谷歌地图V3仅渲染图，如果调整浏览器

-1

我在这个应用程序，我有地图的申请，但如果我加载应用程序的地图加载这样的：谷歌地图V3仅渲染图，如果调整浏览器

的应用与Vuejs开发的Laravel和地图是根据下面的代码经由VUE部件装载的其它compoinent的内部：

<template> 
    <div class="google-map"> 
     <div :id="mapName" style="height: 100%"></div> 
    </div> 
</template> 
<style scoped> 
    .google-map { 
     width: 100%; 
     height: 500px; 
     margin: 0; 
     padding: 0; 
     background: gray; 
    } 

    /*body, html #map-canvas { 
     height: 100%; 
     width: 100%; 
    }*/ 
</style> 

<script> 
    export default { 
     name: 'google-map', 
     props: ['name'], 
     data() { 
      return { 
       mapName: this.name + "-map", 
      } 
     }, 

     mounted() { 
      this.initMap(); 
     }, 

     methods: { 

      initMap() { 
       const element = document.getElementById(this.mapName); 
       const options = { 
        zoom: 14, 
        center: new google.maps.LatLng(51.501527,-0.1921837) 
       }; 

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

在它被加载组件，我使用此代码：

<google-map name="example"></google-map>

我已经尝试了所有可能的解决方案并没有获得该地图，而不必调整浏览器窗口中加载了预期的结果。你能解决这个问题吗？

来源

2017-09-15 Carlos Encine

为什么你没有身体和HTML？ – scaisEdge

，因为内容是为html上的vuejs注入的。好奇的是，如果我做了谷歌执行与HTML和使用iframe它的工作原理，但我需要它没有IFRAME –

你可以尝试以编程方式触发resize事件创建了谷歌地图对象刚过？

你应该做到以下几点刚过var map = ...：

google.maps.event.trigger(map, "resize");

你可能也想看看一个vuejs插件，可以帮助你使用谷歌地图与vuejs，像下面这样：https://www.npmjs.com/package/vue2-google-maps

我从未亲自使用它，但它可能会有所帮助。

来源

2017-09-15 21:43:02 Quent1V

工作，我已经试过几次甚至没有插件能解决我的问题 –

你可以尝试在超时设置为0的'setTimeout'回调中调用'google.maps.event.trigger（map，“resize”）;'有时，只有在触发方法被调用时Google Maps对象未被“正确”创建的时机问题。 – Quent1V

问题应该是VUE，因为我用.vue文件，但我测试使用PHP文件的执行和它的工作没有问题。 –

搜索了几个小时后，我发现一个jQuery插件叫做gmaps和测试它，我最终找到了解决方案。由于地图处于选项卡形式，因此我找到的解决方案如下：

mounted() { 
      this.initMap(); 
     }, 

initMap() { 

       $('#imoveis-add-tab').on('click', function() { 
        var map = new GMaps({ 
         el: '#map', 
         lat: 10, 
         lng: 10, 
         zoom: 8, 
         width: '100%', 
         height: '600px' 
        }); 
       }); 
      },

感谢所有帮助过我的人。

来源

2017-09-16 14:14:33

谷歌地图V3仅渲染图，如果调整浏览器

回答

相关问题