Javascript 如何在Google maps api V3中偏移中心点

我有一张谷歌地图，上面有一块半透明的面板，覆盖了一部分区域。我想调整地图的中心点，以考虑部分被遮挡的地图部分。见下图。理想情况下，十字准线和大头针的放置位置将是地图的中心点

我希望这是有道理的

原因很简单：缩放时，需要将地图置于十字线的中心，而不是50%50%。此外，我将在地图上绘制标记并按顺序移动它们。当地图以它们为中心时，它们也需要位于偏移位置

提前谢谢

---

一旦你找到了，这并不特别困难

您需要将地图的中心转换为其世界坐标，找到地图需要居中的位置，将明显的中心放置在您想要的位置，然后使用真实的中心重新居中地图

API将始终将地图居中于视口的中心，因此如果使用

map.getCenter（）

，需要小心，因为它将返回真实的中心，而不是明显的中心。我认为可以重载API，以便替换其

getCenter（）

和

setCenter（）

方法，但我还没有这样做

代码如下。在本例中，单击按钮将地图的中心（那里有一个路口）向下移动100像素，向左移动200像素

function offsetCenter(latlng, offsetx, offsety) {

    // latlng is the apparent centre-point
    // offsetx is the distance you want that point to move to the right, in pixels
    // offsety is the distance you want that point to move upwards, in pixels
    // offset can be negative
    // offsetx and offsety are both optional

    var scale = Math.pow(2, map.getZoom());

    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);

    map.setCenter(newCenter);

}

---

答案是安德鲁的。然而，在我的例子中，map.getBounds（）一直返回未定义的值。我修复了等待边界更改事件，然后调用函数偏移中心的问题。像这样：

var center_moved = false;
google.maps.event.addListener(map, 'bounds_changed', function() {
  if(!center_moved){
    offsetCenter(map.getCenter(), 250, -200);
    center_moved = true; 
  }
});

---

还可以查看maps对象上的panBy（x:number，y:number）函数

文档中提到了有关函数的以下内容：

按给定的距离（以像素为单位）更改贴图中心。如果距离小于贴图的宽度和高度，则过渡将平滑设置动画。请注意，地图坐标系从西向东（对于x值）和从北向南（对于y值）增加

就像这样使用它：

mapsObject.panBy(200, 100)

---

在偏移路线或一组标记时，可在此处找到另一种方法：

---

它仍然使用@Andrew Leach answer中描述的

fromLatLngToPoint（）

方法。

下面是一个使用maps API的

panBy（）方法解决问题的示例：
这里有一个更简单的方法，可能在响应性设计中更有用，因为可以使用百分比而不是像素。没有世界坐标，没有指向点的坐标

var center;  // a latLng
var offsetX = 0.25; // move center one quarter map width left
var offsetY = 0.25; // move center one quarter map height down

var span = map.getBounds().toSpan(); // a latLng - # of deg map spans

var newCenter = { 
    lat: center.lat() + span.lat()*offsetY,
    lng: center.lng() + span.lng()*offsetX
};

map.panTo(newCenter);  // or map.setCenter(newCenter);

老问题，我知道。但是以CSS为中心的方式如何


我所做的是：


用
溢出：隐藏

用
位置：绝对值覆盖覆盖

通过设置负的
左边距
，将贴图的视在宽度扩展为覆盖宽度（加上任何填充和偏移）

然后，为了遵守定位小部件和属性
div
s


这样，地图的中心与所需区域的中心对齐。js只是标准的MapJS

重新定位街景图标是读者的练习：）


如果您想在左侧覆盖，只需将第24行
24
marginleft
更改为
marginright
，将第32行
right
更改为
left
经过大量搜索后，我找不到一种方法来执行此操作，其中包括缩放。谢天谢地，a已经找到了答案。还有一个


“严格使用”；
const TILE_SIZE={
身高：256，
宽度：256
}; // google World磁贴大小，从v3.22开始
常量缩放_MAX=21；//最大谷歌地图缩放级别，从v3.22开始
常量缓冲区=15；//用于在视口边界内拟合标记的边缓冲区
常量映射选项={
缩放：14，
中心：{
纬度：34.075328，
液化天然气：-118.330432
},
选项：{
mapTypeControl:false
}
};
常量标记=[]；
常量mapDimensions={}；
常量映射偏移={
x:0,，
y:0
};
const mapEl=document.getElementById（'gmap'）；
const overlayEl=document.getElementById（'overlay'）；
const gmap=new google.maps.Map（mapEl，mapOptions）；
常量updateMapDimensions=（）=>{
mapDimensions.height=mapEl.offsetHeight；
mapDimensions.width=mapEl.offsetWidth；
};
const getBoundsZoomLevel=（边界、维度）=>{
const-latRadian=lat=>{
设sin=Math.sin（lat*Math.PI/180）；
设radX2=Math.log（（1+sin）/（1-sin））/2；
返回Math.max（Math.min（radX2，Math.PI），-Math.PI）/2；
};
常量缩放=（mapPx，worldPx，分数）=>{
返回Math.floor（Math.log（mapPx/worldPx/fraction）/Math.LN2）；
};
const ne=bounds.getNorthEast（）；
const sw=bounds.getSouthWest（）；
常量latFraction=（latRadian（ne.lat（））-latRadian（sw.lat（））/Math.PI；
const lngDiff=ne.lng（）-sw.lng（）；
常量lngFraction=（（lngDiff<0）？（lngDiff+360）：lngDiff）/360；
const latZoom=缩放（尺寸.高度，瓷砖尺寸.高度，LATFACTION）；
const lngZoom=缩放（尺寸.宽度，瓷砖尺寸.宽度，lngFraction）；
返回Math.min（latZoom、lngZoom、ZOOM_MAX）；
};
const getBounds=位置=>{
让东北拉特；
让东北长；
让西南拉特；
让西南长；
位置。forEach（函数（位置）{
如果（！东北纬度）{
东北纬度=西南纬度=location.lat；
西南长=东北长=位置.lng；
回来
}
如果（location.lat>northeastLat）northeastLat=location.lat；
否则，如果（location.latsouthwestLong）southwestLong=location.lng，则为其他情况；
});
const northeast=new google.maps.LatLng（northeastLat，northeastLong）；
const soutwest=new google.maps.LatLng（西南纬度西南纬度）
// pass single side:
map.fitBounds(bounds, { left: 1000 })

// OR use Number:
map.fitBounds(bounds, 20)

function initMap() {
    map = new google.maps.Map(document.getElementById("map"), {
        zoom: 13
    });

    bounds = new google.maps.LatLngBounds();
    // add markers to bounds

    // Initial bounds
    defineBounds()

    // Trigger resize browser and set new bounds
    google.maps.event.addDomListener(window, 'resize', function() {
        defineBounds()
    });
}

function defineBounds() {
    if (window.matchMedia("(min-width:1025px)").matches) {
        map.fitBounds(bounds, {
            top: 100,
            right: 100,
            left: 600, // 500 + 100
            bottom: 100
        });
    } else {
        map.fitBounds(bounds, {
            top: 80,
            right: 80,
            left: 80,
            bottom: 330 // 250 + 80
        });
    }
}