Javascript 谷歌地图更改页面宽度上的偏移中心

我正试着做一个决定 我的代码没有按预期工作。。 如果旧宽度大于新宽度和偏移中心-50 如果旧宽度小于新宽度和偏移中心50

偏移中心与if一起工作 但这意味着，如果用户调整窗口大小，则每次调整窗口大小时，偏移中心将为50或-50

地图上的矩形仅用于覆盖名称 html

css

js

函数oh_ow（）{
var oh=$（window.height（）；
var ow=$（窗口）.width（）；
返回ow；
}    
var old_w=oh_ow（）
警觉(旧);；
警报（ow）；
函数initMap（）{
var uluru={lat:62.26393，lng:82.386004}；
var map=new google.maps.map（document.getElementById（'map'）{
缩放：16，
中心：乌卢鲁
});
var marker=new google.maps.marker({
职位：乌卢鲁，
地图：地图
});
功能offsetCenter（latlng、offsetx、offsety）{
//车床是明显的中心点
//offsetx是希望该点向右移动的距离，以像素为单位
//offsety是希望该点向上移动的距离，以像素为单位
//偏移量可以是负数
//offsetx和offsety都是可选的
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 worldcordinatenewcenter=新建google.maps.Point(
worldCoordinateCenter.x-pixelOffset.x，
世界坐标中心y+像素偏移量y
);
var newCenter=map.getProjection（）.fromPointToLatLng（WorldCoordinatedNewCenter）；
地图。设置中心（新中心）；
}
google.maps.event.addDomListener（窗口，“调整大小”，函数（）{
//---------------------------------------------    
变异时间；
var超时=false；
varδ=200；
$（窗口）。调整大小（函数（）{
rtime=新日期（）；
如果（超时===false）{
超时=真；
setTimeout（resizeend，delta）；
}
});
函数resizeend（）{
if（新日期（）-rtime老西）{
offsetCenter（map.getCenter（），50，-0）；
}否则，如果（西北<旧西）{
offsetCenter（map.getCenter（），-50，-0）；
}
}               
}    
//---------------------------------------------    
});
}

我不会是一个反应灵敏的处女

---

请有人能帮我一下吗？据我所知，我认为这是可以通过

setCenter

、

panTo

和

panBy

方法实现的

function initMap() {
  var uluru = {
    lat: 25.26393,
    lng: 55.386004
  };
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 16,
    center: uluru
  });
  var marker = new google.maps.Marker({
    position: uluru,
    map: map
  });

  var winWidth = $(window).width();
  panMap();

  $(window).resize(function() {
    map.setCenter(uluru);
    panMap();
  });

  google.maps.event.addListener(map, 'zoom_changed', function() {
    map.panTo(uluru);
    panMap();
  });

  function panMap(xChange){
    var winWidth = $(window).width();
    if(winWidth > 671){
      map.panBy(xChange || -170, 0);
    }
  }

}

您可以调整

-170

以获得所需的位置

---

此处演示：

您的要求不明确。您是否试图将地理位置居中锁定

{lat:25.26393，lng:55.386004}

？我不希望在页面加载时标记位于右侧，如果调整了大小，则响应速度非常快，但是如果页面宽度低于671px，如何将其设置为居中@迪奥黛为此增加了一个条件。请看新的答案

<script async defer
src="https://maps.googleapis.com/maps/api/js?key=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx&callback=initMap">
</script>


<script>
function oh_ow() {
        var oh = $(window).height();
        var ow = $(window).width();
        return ow;
}    
    var old_w = oh_ow()
    alert(old_w );

        alert(ow);
    function initMap() {
  var uluru = {lat: 62.26393, lng: 82.386004};
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 16,
    center: uluru
  });
  var marker = new google.maps.Marker({
    position: uluru,
    map: map
  });



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

}

google.maps.event.addDomListener(window, 'resize', function() {

//---------------------------------------------    
var rtime;
var timeout = false;
var delta = 200;
$(window).resize(function() {
    rtime = new Date();
    if (timeout === false) {
        timeout = true;

        setTimeout(resizeend, delta);
    }
});
function resizeend() {
    if (new Date() - rtime < delta) {
        setTimeout(resizeend, delta);
    } else {
        timeout = false;
          var nh = $(window).height();
          var nw = $(window).width();
          //alert("old"+old_w);
          //alert("new"+nw);
       if(nw > old_w){
            offsetCenter(map.getCenter(),50,-0);
        }else if(nw < old_w){
            offsetCenter(map.getCenter(),-50,-0);
        }


    }               
}    
//---------------------------------------------    
});





}



</script>

function initMap() {
  var uluru = {
    lat: 25.26393,
    lng: 55.386004
  };
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 16,
    center: uluru
  });
  var marker = new google.maps.Marker({
    position: uluru,
    map: map
  });

  var winWidth = $(window).width();
  panMap();

  $(window).resize(function() {
    map.setCenter(uluru);
    panMap();
  });

  google.maps.event.addListener(map, 'zoom_changed', function() {
    map.panTo(uluru);
    panMap();
  });

  function panMap(xChange){
    var winWidth = $(window).width();
    if(winWidth > 671){
      map.panBy(xChange || -170, 0);
    }
  }

}