Question

我有这个js代码来渲染我的地图：

function loadMap(address)
{
    console.log(address);

    var geocoder = new google.maps.Geocoder();
    geocoder.geocode({ "address": address }, function (results, status)
    {
        var pos = new google.maps.LatLng(53.681602, -1.911672); // default.
        if (status === google.maps.GeocoderStatus.OK) {
            pos = results[0].geometry.location;
        } else {
            alert("Error : Unable to locate!");
        }

        console.log(pos);

        var mapOptions = {
            center: pos,
            zoom: 10,
            zoomControl: true,
            zoomControlOptions: { position: google.maps.ControlPosition.RIGHT_TOP },
            mapTypeControl: false,
            panControl: false,
            scaleControl: false,
            streetViewControl: false,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        var map = new google.maps.Map(document.getElementById("mapCanvas"), mapOptions);
        var marker = new google.maps.Marker({
            map: map,
            position: pos,
            animation: google.maps.Animation.DROP
        });
    });
}

问题是第一次执行地图显示没问题，但第二次，邮政编码仍然相同，纬度/长度相同但地图部分显示，只有约1/4显示在div的左上角。

我做错了什么？

修改

在jterrys建议后，它看起来仍然一样：

enter image description here

HTML / CSS：

#mapCanvas
{
    width: 655px;
        height: 472px;
    border: 1px solid #ccc;
}

<div id="mapCanvas"></div>

我正在使用JQuery 2.0，在使用＆lt; 2.0

之前我也有过这个

Answer 1

在mapoptions回调之外设置map和geocode一次然后更新标记，而不是重新创建整个地图。

Fiddle 显示一个地理编码，然后显示另一个地理编码，然后返回第一个... div定位看起来正常。

根据更新的问题， This Fiddle 会在渲染地图之前等待第二个标签的实际激活...我在制作标签式地图时遇到了完全相同的问题。

$("#two").click(function() {
    init();
}

这可能更加强大，并且与用户与它们交互时触发的tabs事件相关联，但是这个快速示例说明了解决方案。

作为副作用，这还可以节省显示地图所需的资源（以及任何配额），直到用户实际激活标签为止！

为什么谷歌地图api第二次部分渲染地图？

1 个答案: