Question

我想知道是否有可能抵消Google maps api v3中地图的中心。我想在像素中控制这个偏移，因为lat和lng似乎是错误的并且很难预测。

我只需要放置一个标记，然后将中心偏移250px，这样我就可以在地图中间放置一些其他内容。

希望有人可以提供帮助！

Answer 1

在研究时发现了这个问题，我想应该提供一个答案：

function map_recenter(latlng,offsetx,offsety) {
    var point1 = map.getProjection().fromLatLngToPoint(
        (latlng instanceof google.maps.LatLng) ? latlng : map.getCenter()
    );
    var point2 = new google.maps.Point(
        ( (typeof(offsetx) == 'number' ? offsetx : 0) / Math.pow(2, map.getZoom()) ) || 0,
        ( (typeof(offsety) == 'number' ? offsety : 0) / Math.pow(2, map.getZoom()) ) || 0
    );  
    map.setCenter(map.getProjection().fromPointToLatLng(new google.maps.Point(
        point1.x - point2.x,
        point1.y + point2.y
    )));
}

如果您的Google地图变量不是map，请使用以下调用函数参考：

function map_recenter(map,latlng,offsetx,offsety) { ...

Answer 2

请参阅此问题：How to offset the center of a Google maps (API v3) in pixels?

这是对我提供的答案here的修改。

google.maps.Map.prototype.setCenterWithOffset= function(latlng, offsetX, offsetY) {
    var map = this;
    var ov = new google.maps.OverlayView();
    ov.onAdd = function() {
        var proj = this.getProjection();
        var aPoint = proj.fromLatLngToContainerPixel(latlng);
        aPoint.x = aPoint.x+offsetX;
        aPoint.y = aPoint.y+offsetY;
        map.setCenter(proj.fromContainerPixelToLatLng(aPoint));
    }; 
    ov.draw = function() {}; 
    ov.setMap(this); 
};

然后您可以像这样使用它：

var latlng = new google.maps.LatLng(-34.397, 150.644);
var map = new google.maps.Map(document.getElementById("map_canvas"), {
    zoom: 8,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    center: latlng
});

map.setCenterWithOffset(latlng, 0, 250);

这是一个有效的example。

Answer 3

查看MapCanvasProjection对象 - http://code.google.com/apis/maps/documentation/javascript/reference.html#MapCanvasProjection

您可以获取地图中心latLng（map.getCenter（））然后使用fromContainerPixeltoLatLng（）将其转换为容器像素坐标

Answer 4

还有地图对象的panBy方法......你可以偏移指定数量的像素。但是，您将获得平滑过渡动画，这可能不是您想要的。我自己也在寻找相同的东西，会让你知道我发现了什么。

如何以像素为单位偏移Google地图（API v3）的中心？

4 个答案: