0

我有这个 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 建议之后，它看起来仍然一样：

在此处输入图像描述

HTML/CSS：

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

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

我正在使用 JQuery 2.0，我之前使用 <2.0 时也遇到过这个问题

4

1 回答 1

0

在回调之外设置mapoptionsand一次 -然后更新标记而不是重新创建整个地图。mapgeocode

小提琴显示一个地理编码，然后是另一个，然后回到第一个......div定位看起来很正常。

根据更新的问题，这个小提琴在渲染地图之前等待第二个选项卡的实际激活......我在创建我的选项卡式地图时遇到了完全相同的问题。

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

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

作为附带奖励，这还可以节省显示地图所需的资源（以及任何配额），直到用户实际激活选项卡！

于 2013-05-11T17:20:53.080 回答