javascript - 谷歌地图 - 缩放时保持居中

Question

在 Google map 中，我希望在放大或缩小时能够将 map 中心保持在我所在位置的标记上。这是 Ingress 所做的事情，无论您在哪里双击(或双击)或在哪里捏合， map 都会保持在您的标记的中心。所以有可能...

我现在想到的最好的是:

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

但它远非完美，它只是在用户已经缩放后重新居中 map ...

非常感谢!

[编辑] 在 API 引用中绝对没有任何帮助......或者在其他地方我失明并错过了它!

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