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

Question

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

我现在想到的最好的是：

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

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

非常感谢！

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

Answer 1

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

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

Answer 2

纯粹使用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>

Answer 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>

Answer 4

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

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

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