Question

基本上问题是我在文章上加载地图并加载Google徽标，条件文本和光标变为手。问题是图像没有加载但是当我调整页面大小时图像正常加载，这是我使用的脚本：

jQuery(document).ready(function($) {
    function success(position) {
      var mapcanvas = document.createElement('div');
      mapcanvas.id = 'mapcontainer';
      mapcanvas.style.height = '400px';
      mapcanvas.style.width = '100%';

      document.querySelector('article').appendChild(mapcanvas);

      var coords = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);

      var options = {
        zoom: 15,
        center: coords,
        mapTypeControl: false,
        navigationControlOptions: {
            style: google.maps.NavigationControlStyle.SMALL
        },
        mapTypeId: google.maps.MapTypeId.ROADMAP
      };
      var map = new google.maps.Map(document.getElementById("mapcontainer"), options);

      var marker = new google.maps.Marker({
          position: coords,
          map: map,
          title:"You are here!"
      });
    }

    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(success);
    } else {
      error('Geo Location is not supported');
    }

});

这是HTML

<div class="col-xs-12 info">

    ---some text---

    <button class="btn btn-warning continueCasual">Continue</button>

</div>
<div class="col-xs-12 formPub">
    --some inputs
    <article id="">

    </article>
</div>

显示地图将为div的div的代码：

$('.continueCasual').on('click',function(event){
    $('.info')hide('fast', function(){  
            $('.formPub').show('fast');
    });
})

如果地图将其加载到隐藏元素之外，则地图加载完美，当地图将其加载到隐藏元素内部然后显示地图加载灰色

可能是什么问题，我该如何解决？

注意

地图隐藏在用户做出一些动作之后，我在新文档中测试并显示地图，当我隐藏它然后显示它发生的问题。

Answer 1

不是使用jquery创建div，而是必须在初始化地图之前定义此div

<div id = 'mapcontainer' style ="height: 400px; width: 500px;" ></div>

仅保留

jQuery(document).ready(function($) {
    function success(position) {

    var coords = new google.maps.LatLng(position.coords.latitude, 
            position.coords.longitude);
   .......

谷歌地图首先加载灰色，并在调整大小时加载图像？

注意

1 个答案: