Question

我想要实现的目标：两张地图画布，一张在另一张之上，调整大小并抵消 - 想想Facebook封面图片和个人资料图片之间的关系 - “顶级画布”移动“底部画布”时重新定位，但两个地图对齐以显示单个地图的外观。

我遇到了什么问题：我正在使用事件监听器重新定位地图，但这会导致地图共享一个公共中心。因为“顶部画布”是偏移的，所以我需要补偿与页面相关的两个实际中心之间的差异。我正在使用此example中找到的解决方案来抵消“顶部画布”，下面你会看到我是如何整合的。但由于某些原因，我不知道，它是行不通的。没有错误。只是没有推出。

这里只是事件监听器：

var map,map2;
    function initialize() {

        var mapOptions = {
        zoom: 8,
        center: new google.maps.LatLng(-34.397, 150.644),
        disableDefaultUI: true};

        var mapOptions2 = {
        zoom: 8,
        center: new google.maps.LatLng(-34.397, 150.644),
        disableDefaultUI: true};

    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
    map2 = new google.maps.Map(document.getElementById('map-canvas2'), mapOptions2);

    google.maps.event.addListener(map, 'center_changed', function(){
        map2.setCenter(map.getCenter());
    });

}

    google.maps.event.addDomListener(window, 'load', initialize);

之后是偏移量：

var map,map2;
    function initialize() {

        var mapOptions = {
        zoom: 8,
        center: new google.maps.LatLng(-34.397, 150.644),
        disableDefaultUI: true};

        var mapOptions2 = {
        zoom: 8,
        center: new google.maps.LatLng(-34.397, 150.644),
        disableDefaultUI: true};

    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
    map2 = new google.maps.Map(document.getElementById('map-canvas2'), mapOptions2);

    function offsetCenter(latlng,offsetx,offsety) { 
        var scale = Math.pow(2, map.getZoom());
        var nw = new google.maps.LatLng(
            map.getBounds().getNorthEast().lat(),
            map.getBounds().getSouthWest().lng());
        var worldCoordinateCenter = map.getProjection().fromLatLngToPoint(latlng);
        var pixelOffset = new google.maps.Point((offsetx/scale) || 0,(offsety/scale) ||0)
        var worldCoordinateNewCenter = new google.maps.Point(
            worldCoordinateCenter.x - pixelOffset.x,
            worldCoordinateCenter.y + pixelOffset.y);
        var newCenter = map.getProjection().fromPointToLatLng(worldCoordinateNewCenter);
        return newCenter;
    }
    google.maps.event.addListener(map, 'center_changed', function(){
        map2.setCenter(offsetCenter(map.getCenter(),300,300));
    });

}

    google.maps.event.addDomListener(window, 'load', initialize);

任何帮助都会受到赞赏，而且一般性评论因为我是新手而且还在学习。谢谢！

使用谷歌地图的偏移中心＆＃39; center_changed＆＃39;事件

0 个答案: