Question

我一直在使用该网站很长一段时间，这对我非常有帮助。今天我第一次遇到一个问题，我找不到使用搜索功能的解决方案。

这是：我有一个关于谷歌地图的大应用程序，它是不可或缺的，我可以放大地图到绝对最大值。对于大多数城市位置，此最大缩放级别为21，但是当我在google地图对象上执行setZoom（21）或setOptions（{zoom：21}）时，它只会进入缩放级别19。只有当我再次为同一位置执行setZoom（21）并且在短暂的等待之后，谷歌地图才会实际达到所需的缩放级别21。仅当从地理编码事件触发的功能执行缩放时，才会出现此问题。例如，我做setZoom

下面你可以看到代码的精简版本和JSFiddle以及一些复制步骤来查看问题。

请看一下这个JSFiddle： http://jsfiddle.net/mYUuR/4/ 重现奇怪行为的步骤：

运行小提琴并等待地图加载。
打开控制台
按左上角的搜索。（您将看到地图放大并在控制台中记录“当前缩放级别：19”。
再次按搜索。（地图会进一步放大，“当前缩放级别：21”将记录到您的控制台。

这是我的javascript：

var mapObj = initializeMap()
var geocoder;

function initializeMap() 
{

    geocoder = new google.maps.Geocoder();
    searchInput = document.getElementById("searchField");
    searchInput.focus();
    var searchButton = document.getElementById("searchButton");
    searchButton.addEventListener("click", codeAddress);


    var mapOptions = 
    {
        center: new google.maps.LatLng(53.70854553884514, 10.105501748621464),
        zoom: 3,            
        panControl: true,
        zoomControl: true,
        mapTypeControl: true,
        scaleControl: true,
        streetViewControl: true,
        overviewMapControl: true,
        draggable: true,
        mapTypeId: google.maps.MapTypeId.HYBRID
    };
    gMapObj = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);

    return gMapObj;
}
function codeAddress(e) {
    e.preventDefault();
    var address = searchInput.value;
    geocoder.geocode({
        "address": address
    },

    function (results, status) 
    {
        if (status == google.maps.GeocoderStatus.OK) 
        {
            google.maps.event.addListenerOnce(mapObj, "center_changed", function (e) 
            {
                mapObj.setZoom(21);                
                console.log("Current Zoom Level: " + mapObj.getZoom());
            });
            mapObj.setCenter(results[0].geometry.location);
        } else {
            alert("Search was not successful for the following reason: " + status);
        }
    })

}

这是我的HTML：

<div id="NavigationBar">
    <form>
        <input id="searchField" type="textbox" value="Hamburg" placeholder="Enter your address."></input>
        <input id="searchButton" type="submit" value="Search">
    </form>
</div>
<div id="PageContents">
    <div id="map-canvas"></div>
</div>

这是我的CSS：

#searchButton
{
    background-color: #FFF;
}

html { height: 100% }
body 
{ 
    height: 100%; margin: 0; padding: 0;
    position: relative;
}
#NavigationBar
{
    height: 5%;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-bottom-color: #AAA;
}

#map-canvas
{
    height: 100%;
    width: 100%;
}

#PageContents
{
    position: relative;
    height: 95%;
    width: 100%;
}

我已经尝试过的事情：

在第一个之后直接执行第二次缩放。
使用监听“zoom_changed”的eventListener完成第一次缩放后执行第二次缩放。

代码示例：

google.maps.event.addListenerOnce(mapObj, "zoom_changed", function(e){mapObj.setZoom(21)});

我非常感谢任何建议或想法。

谷歌地图：由地理编码器触发时setZoom（）出现故障

0 个答案: