javascript - 谷歌地图 API : Move map center to a position on my page?

Question

也许有一个解决方案:

我正在使用 Gmap api 将 map 嵌入到 map 顶部的覆盖层下方。叠加层的右侧有一个小箭头，我希望我的 map 标记位于此点(或其旁边的几个像素)

我知道可以使用 GMaps Infowindow，但我有这种方式。

所以我可以使用 $("#arrow").offset() 来获取其在页面上的位置，但我不知道如何移动 或平移 将 map 中心移动到此像素目标。

window.onload = function() {
    var myOptions = {
        center: new google.maps.LatLng(47.259998, 11.398032),
        zoom: 17,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        disableDefaultUI: true
    };

    var map = new google.maps.Map(document.getElementById("map"), myOptions);

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

    console.log( $("#arrow").offset().top );
}

<小时/>

更新:

这是我现在页面模板中的代码。不过我有最后一个问题。如果我的页面宽度为 1440px，则标记相对于我的小箭头的位置就可以了:https://goo.gl/u489nd但是，一旦我将页面大小调整为较小的宽度并再次加载页面，标记就会位于覆盖层后面，并且不会相对于小箭头定位。 https://goo.gl/k4rPYv

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

window.onresize = function() {
    positionMap();
}

function initMap() {
    var myOptions = {
        center: new google.maps.LatLng(47.260071, 11.404705),
        zoom: 17,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        disableDefaultUI: true,
        draggable: false,
        mapTypeControl: false,
        zoomControl: false,
        scaleControl: false,
        scrollwheel: false
    };

    var map = new google.maps.Map(document.getElementById("map"), myOptions);

    var marker = new google.maps.Marker({
        position: new google.maps.LatLng(47.260071, 11.404705),
        map: map,
        title: 'Österreichisches Rotes Kreuz Innsbruck'
    });
}

function positionMap() {
    var arrowPos = $("#map-center").position();
    console.log(arrowPos);

    var getPixelOffset = function(map, marker) {
        // Calculate marker position in pixels form upper left corner
        var scale = Math.pow(2, map.getZoom());
        var nw = new google.maps.LatLng(
            map.getBounds().getNorthEast().lat(),
            map.getBounds().getSouthWest().lng()
        );
        var worldCoordinateNW = map.getProjection().fromLatLngToPoint(nw);
        var worldCoordinate = map.getProjection().fromLatLngToPoint(marker.getPosition());
        var pixelOffset = new google.maps.Point(
            Math.floor((worldCoordinate.x - worldCoordinateNW.x) * scale),
            Math.floor((worldCoordinate.y - worldCoordinateNW.y) * scale)
        );
        return pixelOffset;
    };

    // Wait until the map is initialized
    var listener = google.maps.event.addListener(map, "idle", function() { 
        var pixelOffset = getPixelOffset(map, marker);

        // Do the pan
        map.panBy( Math.abs( pixelOffset.x - ( arrowPos.left ) - 150 ),
                 Math.abs( pixelOffset.y - ( arrowPos.top ) ) - 50 );

        google.maps.event.removeListener(listener); 
    });
}

Answer 1

一种方法是使用 map.getProjection().fromLatLngToPoint() 查找 map 内标记的像素位置，然后减去 $("#arrow")。 offset() 距离标记位置并调用 map.panBy() 将标记移动计算出的差值。

这是将标记移动到示例位置的演示{ top: 50, left: 100 }:

var myOptions = {
        center: new google.maps.LatLng(47.259998, 11.398032),
        zoom: 17,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        disableDefaultUI: true
    };

var map = new google.maps.Map(document.getElementById("map"), myOptions);

var marker = new google.maps.Marker({
        position: new google.maps.LatLng(47.260071, 11.404705),
        map: map,
        title: 'Hello World!'
    });


// Replace this with call to $("#arrow").offset()
var arrowPos = { top: 50, left: 100 };

var getPixelOffset = function(map, marker) {
    // Calculate marker position in pixels form upper left corner
    var scale = Math.pow(2, map.getZoom());
    var nw = new google.maps.LatLng(
        map.getBounds().getNorthEast().lat(),
        map.getBounds().getSouthWest().lng()
    );
    var worldCoordinateNW = map.getProjection().fromLatLngToPoint(nw);
    var worldCoordinate = map.getProjection().fromLatLngToPoint(marker.getPosition());
    var pixelOffset = new google.maps.Point(
        Math.floor((worldCoordinate.x - worldCoordinateNW.x) * scale),
        Math.floor((worldCoordinate.y - worldCoordinateNW.y) * scale)
    );
    return pixelOffset;
};

// Wait until the map is initialized
var listener = google.maps.event.addListener(map, "idle", function() { 
    var pixelOffset = getPixelOffset(map, marker);
    
    // Do the pan
    map.panBy(Math.abs(pixelOffset.x - arrowPos.left),
             Math.abs(pixelOffset.y - arrowPos.top));
    
    google.maps.event.removeListener(listener); 
});

html,
body,
#map {
    display: block;
    width: 100%;
    height: 100%;
}

#map {
    background: #58B;
}

<script src="http://maps.google.com/maps/api/js?sensor=true&.js"></script>
<div id="map"></div>

另外，请注意，您必须在 map 完全加载时(即在 idle 事件处理程序中)执行此操作。否则(这就是我所经历的)getProjection() 方法可能不可用。

引用文献:

• How to access Google Maps API v3 marker's DIV and its pixel position?