Question

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

我现在提出的最好的是：

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

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

非常感谢！

[编辑]绝对没有任何帮助在API参考...或其他地方，我是盲目的，错过了它！

Answer 1

纯粹使用 Javascript

首先，默认情况下通过 scrollwheel = false 停用Google地图的滚动缩放功能，
接下来通过捕获鼠标事件创建自定义滚动缩放功能并设置谷歌地图的缩放级别

检查我的示例代码：提琴网址：https://jsfiddle.net/vh3gqop0/17/

public class MainActivity extends AppCompatActivity {

int baslangic= 0;
float sayac = 0.2f;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    final Button ekle = (Button)findViewById(R.id.ekle);
    final TextView toplam = (TextView)findViewById(R.id.toplam);
    toplam.setText("" + baslangic);

    ekle.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View view) {
            class SuToplam {
                public void main(String args[]) {
                toplam.setText("" + baslangic);
                for (float sayac= 0.2f; sayac >= 0.2; sayac= +0.2f){
                    sayac ++;
                }
                }
            }




        }
    });


}

}

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%;
}

Answer 2

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

有关完整代码，请在此处查看我的答案：https://stackoverflow.com/a/30118649/764897

Answer 3

不幸的是，Google Maps Api不提供此行为。

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

在Codepen

中查看

禁用：

双clickin
滚动
平移

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 4

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

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

您可以查看有关here的示例以及有关panTo函数here的文档。 Becareful ，它应该搞乱所有可拖动的东西。

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

4 个答案: