Question

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

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

所有父div的高度都设置为100％。我相信这个问题与人们在使用Jquery移动设备时遇到的问题非常相似。正如您所看到的，我没有使用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.');
    }
    }

感谢您的帮助

谢谢

Answer 1

在地图可见时调用此方法：

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

Answer 2

后，您已初步确定地图，请尝试

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

Google API Docs 的更多信息 - - F3 /查找'调整大小'

谷歌地图部分显示

2 个答案: