谷歌地图 - 缩放时保持中心

Posted 2023-02-23

【中文标题】谷歌地图 - 缩放时保持中心

【英文标题】：Google maps - keep center when zooming

【发布时间】：2015-01-21 13:53:59

【问题描述】：

在 Google 地图中，当我放大或缩小时，我希望能够将地图的中心保持在我所在位置的标记上。这是 Ingress 所做的事情，无论您在哪里双击（或双击）或在哪里捏捏，地图都会以标记为中心。所以有可能……

我现在想出的最好的是：

google.maps.event.addListener(mymap, 'zoom_changed', function() 
    mymap.setCenter(lat: myLoc.lat, lng: myLoc.lon);
)

但这远非完美，它只是在用户缩放后重新居中地图...

非常感谢！

[EDIT] 在 API ref 中绝对没有任何帮助......或者在其他地方我失明并错过了它！

【问题讨论】：

尝试在地图属性上将draggable设置为false

已经设置好了。这样可以防止移开，这很好，但不能缩小...

这个运气好吗？我遇到了同样的问题。

不，抱歉，自从我提出这个问题后，我就把它放在一边并从事其他事情......仍然希望有人能在这方面提供帮助。

我不舒尔。你能测试一下吗？ var latLng = new google.maps.LatLng(myLoc.lat, myLoc.lon); mymap.setCenter(latLng);

【参考方案1】：

纯粹使用Javascript

首先你通过

scrollwheel=false

禁用谷歌地图的滚动缩放功能， 接下来通过捕获鼠标事件创建自定义滚动缩放功能并为谷歌地图设置缩放级别

查看我的示例代码：Fiddle URL：https://jsfiddle.net/vh3gqop0/17/

var map, i = 12;
function initialize() 
		var myLatlng = new google.maps.LatLng(46.769603, 23.589957);
		var mapOptions = 
			center: myLatlng,
			zoom: i,
			scrollwheel: false,
  		disableDoubleClickZoom: true,
			mapTypeId: google.maps.MapTypeId.ROADMAP
		;
		map = new google.maps.Map(document.getElementById("map_canvas"),
			mapOptions);

		var marker = new google.maps.Marker(
			position: myLatlng,
			map: map,
			title: 'Any Title'
		);


	

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

$( document ).ready(function() 
    $('#map_canvas').on("wheel", function(evt)
   // console.log(evt.originalEvent.deltaY);
    		if(evt.originalEvent.deltaY > 0)
        	map.setZoom(++i);
        else 
        	map.setZoom(--i);
        
    		
    );
);

#map_canvas
    height:400px;
    width:100%;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<div id="map_canvas"></div>

【讨论】：

虽然，当您在拖动后尝试放大/缩小时，中心会改变。所以它不起作用。它认为您可以通过在地图选项中设置draggable: false 来关闭拖动。相应地更新了您的答案

此示例不会更新当前的缩放级别，如果您尝试使用 UI 控件进行缩放，它将不会更新 i 并打乱缩放。

@Erevald 因为我的解决方案的示例代码，我知道您对此有更多案例，但我的解决方案是核心，您可以展示任何案例，请尝试使用我的解决方案，您可以解决：D。

您能否将答案发布为 Codepen/JSBin/Fiddle？ *** doesn't support running code snippets on the mobile site，全站劫持捏事件。

我无法在 android 上的 Chrome 中捏缩放，即使在 JSBin 中最大化结果窗格之后也是如此。另外，我无法平移地图，这是必需的。

【参考方案2】：

我不知道您为什么将这个问题标记为 javascript 和 Android。在 Android 上，您需要将 MapView 包装在另一个视图中，并在 onInterceptTouchEvent 中检测双击动作，如果您的类可以覆盖 FrameLayout，您可以覆盖它。然后返回 true 以防止地图处理此事件，而您则处理它。

完整代码请看我的回答：https://***.com/a/30118649/764897

【讨论】：

原来 OP 正在寻找 JavaScript 解决方案，所以这个答案很遗憾不适用。我也在寻找解决方案，所以我会悬赏这个问题。

【参考方案3】：

很遗憾，Google Maps Api 不提供这种行为。

以下示例不需要 jQuery，支持双击和鼠标滚动，但您可以根据需要添加更多事件。

查看Codepen

禁用：

双击进入 滚动 平移

在地图上添加dblclick 和zoom_changed 事件，在画布上添加mousewheel 事件。

我已经对代码进行了注释，希望这适用于您的情况。请记住，您需要为所有浏览器和设备标准化鼠标滚轮速度。 Hammer.js 是一个很好的库。

var map, zoom;

function initialize() 

  // The white house!
  var myLatLng = new google.maps.LatLng(38.8977, -77.0365);

  // Default zoom level
  zoom = 17;

  // Keep a reference for evens
  var $map = document.getElementById("map");

  // Disable scrolling + double-click + dragging
  map = new google.maps.Map($map, 
    zoom: zoom,
    center: myLatLng,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    scrollwheel: false,
    disableDoubleClickZoom: true,
    //draggable: false
  );

  var marker = new google.maps.Marker(
    position: myLatLng,
    map: map
  );


  // EVENTS

  // Double Click: event zoom by 1
  map.addListener('dblclick', function(e) 
    zoomHandler(e.latLng, 1);
  );

  // Zoom changed: update current zoom level
  map.addListener('zoom_changed', function(e) 
    // Using a timeout because `getZoom()` does not return a promise.
    setTimeout(function() 
      zoom = map.getZoom();
    , 50);

  );

  // Dom event: On mousewheel
  $map.addEventListener('mousewheel', wheelEvent, true);


// Mouse Scrolling event
function wheelEvent(event) 
  if (event.deltaY > 1)
    zoomHandler(event, -1);
  else
    zoomHandler(event, 1);


// Zoom in/out
function zoomHandler(event, zoomin) 
  zoom += zoomin;
  map.setZoom(zoom);


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

#map 
  width: 100%;
  height: 240px;

<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC9d3jaUX6Qdr0Uzvq6fQXVmZ1PBuHEVAQ"></script>

【讨论】：

添加了一个 Codepen 并提到需要标准化鼠标滚轮速度和/或捏事件。

在 Android 的 Chrome 57 上尝试了 Codepen，但我无法缩放或平移地图。

你现在可以平移了，我现在没有安卓来测试捏缩放，但我发布的代码不应该阻止默认行为。就像我说的那样，需要对不同类型的事件之间的值进行标准化才能获得流畅的体验。

【参考方案4】：

您应该尝试使用panTo 函数的center_changed 事件。

google.maps.event.addListener(mymap, 'center_changed', function() 
    mymap.panTo(lat: myLoc.lat, lng: myLoc.lon);
)

您可以查看有关它的示例 here 和有关 panTo 函数 here 的文档。 小心，它应该会弄乱所有可拖动的东西。

【讨论】：

这个样本会无限循环。

对不起，我会把setCenter改成panTo；感谢您的回复@HoangHieu