谷歌地图部分显示

-2

我目前在谷歌地图API3的这个问题上敲我的头。地图部分加载在右上角，但是当我刷新页面时，地图会完全显示。下面是一个例子：谷歌地图部分显示

https://sites.google.com/site/dferrai/home/Sentieri%20ischitani%202014-02-28%2010-06-15.png

所有父div的具有高度设置为100％。我相信这个问题与使用Jquery mobile时遇到的问题非常相似。正如你所看到的，我没有使用Jquery mobile，但是我以相同的方式管理页面。每个页面都是一个部分，它们都包含在一个页面中，并根据需要使用Javascript进行显示。很明显，在该部分变得可见之前加载地图，并且在那里出现毛刺。任何想法如何解决它？这里是我的简化代码：http://jsfiddle.net/elektray/V9LxT/1/

/*Script for maps*/ 

    var lat, lon; 

    function onBodyLoad() 
    { 
    console.log("subscribing to the deviceready event"); 
    document.addEventListener("deviceready", onDeviceReady, false); 
    } 

    function onDeviceReady() { 
    navigator.geolocation.getCurrentPosition(onGeoSuccess, onGeoError); 
    } 

    function onGeoSuccess(position) { 
    lat = position.coords.latitude; 
    lon = position.coords.longitude; 
    var currentposition = new google.maps.LatLng(lat,lon); 
    console.log("currentposition " + currentposition); 
    var mapoptions = { 
     zoom: 8, 
     center: currentposition, 
     mapTypeId: google.maps.MapTypeId.TERRAIN 
    }; 

    var map = new google.maps.Map(document.getElementById("map_canvas"), mapoptions); 
    var iconBase = 'images/'; 

    /*Create marker for user current position*/ 
    var marker = new google.maps.Marker({ 
     position: currentposition, 
     map: map, 
     icon: iconBase + 'my-location.svg' 
    }); 

    console.log("creating map1"); 

    /*Create marker for walks starting points with info dialog*/ 

    var walk1Start = new google.maps.LatLng (59.32522, 18.07002); 

    var contentString = '<div id="content">'+ 
     '<div class="siteNotice">'+ 
     '</div>'+ 
     '<h2 id="firstHeading" class="firstHeading">Walk1</h2>'+ 
     '<div id="bodyContent">'+ 
     '<p>Prima linea di decrizione ' + 
     'Senconda linea di decrizione '+ 
     'Heritage Site.</p>'+ 

     '</div>'+ 
     '</div>'; 

    var infowindow = new google.maps.InfoWindow({ 
     content: contentString 
    }); 


    var walk1Marker = new google.maps.Marker ({ 
     position: walk1Start, 
     map: map, 
     icon: iconBase + 'map-icon-hover.svg', 
     title: "Walk 1" 
    }); 

     google.maps.event.addListener(walk1Marker, 'click', function() { 
     infowindow.open(map,walk1Marker); 
    }); 

    /*Script to adjust map view to all markers*/ 

    // Make an array of the LatLng's of the markers you want to show 
    var LatLngList = new Array (currentposition, walk1Start); 
    // Create a new viewpoint bound 
    var bounds = new google.maps.LatLngBounds(); 
    // Go through each... 
    for (var i = 0, LtLgLen = LatLngList.length; i < LtLgLen; i++) { 
     // And increase the bounds to take this point 
     bounds.extend (LatLngList[i]); 
    } 
    // Fit these bounds to the map 
    map.fitBounds (bounds); 
    } 

    function onGeoError(error) { 
     if(error == 1) { 
     alert('Turn on Geolocation services.'); 
    } 
    }

我感谢你的帮助

感谢

来源

2014-02-28 Daniela

我没有看到一个地图都在你的小提琴？ – putvande

小提琴不包含CSS - 但是，尝试固定宽度和500px乘500px的高度以使地图工作并从中取出。 –

查看[google.maps.Map resize事件]（https://developers.google.com/maps/documentation/javascript/reference#Map）：'当div更改大小时，开发人员应在地图上触发此事件： google.maps.event.trigger（地图，'调整大小'）。（如果你真的有地图大小完全指定） – geocodezip

调用此当你在地图上看到：

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

来源

2014-02-28 10:40:19 slash197

后你初始化地图尝试

window.onresize = function() { google.maps.event.trigger(map,'resize'); }

更多信息在Google API Docs - - F3 /查找“调整”

来源

2014-02-28 10:38:12

谷歌地图部分显示

回答

相关问题