Google地图 - 缩放时保持居中 [英] Google maps - keep center when zooming

问题描述

在Google地图中，当我放大或缩小时，我希望能够将地图中心保留在我所在位置的标记上。这是Ingress所做的事情，双击（或双击）或捏住的地方并不重要，地图仍然位于标记的中心。所以这是可能的......

我现在想出的最好的是：

  google.maps.event.addListener（mymap，'zoom_changed'，function（）{
 mymap.setCenter（{lat：myLoc.lat，lng：myLoc.lon}）; 
 }）
  

但它并不完美，它只是在用户已经放大后重新定位地图。 ..

非常感谢！

绝对没有帮助API参考...或者

解决方案

纯粹使用 Javascript

• 首先，您通过 scrollwheel = false ，
禁用谷歌地图的滚动缩放功能，

• 下一步通过捕获鼠标事件来创建自定义滚动缩放功能，并为Google地图设置缩放级别。
  

查看我的示例代码：Fiddle URL： https://jsfiddle.net/vh 3gqop0 / 5 /

var map，i = 12;函数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'）。如果（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？key = AIzaSyC9d3jaUX6Qdr0Uzvq6fQXVmZ1PBuHEVAQ>< / script>< div id =map_canvas>< / div>

In Google Maps, I would like to be able to keep the center of the map on a marker on my location when I'm zooming in or out. It's something that Ingress does, it doesn't matter where you double tap (or double click) or where you pinch, the map remains centered on your marker. So it's possible...

The best I came up with for now is :

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

But it's far from perfect, it just re-center the map after the user already zoomed...

Thanks a lot !

[EDIT] absolutely nothing helps in the API ref... Or elsewhere I'm blind and missed it !

解决方案

Purely using Javascript

• First you disable scroll zoom function by default of google map by scrollwheel=false,
• Next create custom scroll zoom function by capture mouse event and set zoom level for google map

Check my sample code: Fiddle URL: https://jsfiddle.net/vh3gqop0/5/

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?key=AIzaSyC9d3jaUX6Qdr0Uzvq6fQXVmZ1PBuHEVAQ"></script>
<div id="map_canvas"></div>

这篇关于Google地图 - 缩放时保持居中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！