地图始终不在中心

Question

我使用以下代码将地图居中，因此将标记置于中心。问题是标记大部分时间都在左上角，当我放大和缩小时，标记将再次位于左上角。

怎么了？您可以通过erik-edgren.nu/weather 实时查看问题/站点。

function initialize_map() {
    var myOptions = {
        zoom: 4,
        mapTypeControl: true,
        navigationControl: true,
        navigationControlOptions: {
            style: google.maps.NavigationControlStyle.SMALL
        },
        streetViewControl: false,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }

    map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
}

function initialize() {
    $('#map_canvas').hide();

    if(geo_position_js.init()) {
        $('#current').html('Söker efter din plats. Var god vänta...');
        geo_position_js.getCurrentPosition(show_position, function() {
            $('#current').html('Kunde tyvärr inte hitta din position.');
        }, {
            enableHighAccuracy: true
        });
    } else {
        $('#current').html('Det verkar som att din webbläsare inte tillåter att webbsidan hämtar din position. Ta en titt i webbläsarens inställningar för att se om denna funktion är igång eller inte, och försök sedan igen.');
    }
}

function show_position(p) {
    $('#current').html('');
    $('#map_canvas').show();

    var pos = new google.maps.LatLng(p.coords.latitude, p.coords.longitude);
    map.setCenter(pos);
    map.setZoom(10);

    var marker = new google.maps.Marker({
        position: pos,
        map: map
    });

    $('#weather-data').load('weather-set.php?lat=' + p.coords.latitude.toFixed(6).replace(/\./, '') + '&long=' + p.coords.longitude.toFixed(6).replace(/\./, ''));
}

提前致谢！

Answer 1

确保您在 map_canvas div 元素上明确设置了大小，我在某些浏览器上遇到了这个问题，但我不小心把它遗漏了。

<div id="map_canvas" style="width: 100%; height: 100%"></div> 

来自API docs：

请注意，地图的大小总是取自它的大小 包含元素，因此您必须始终在该元素上设置大小 明确的。