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

Question

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

15

在Google地图中，我希望能够在放大或缩小时将地图中心保持在我的位置标记上。Ingress有这样一个功能，不管您在哪里双击或捏合，地图都会保持在您的标记上。所以这是可能的......目前我想到的最好的方法是：

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

但它离完美还有很长的路要走，它只是在用户已经缩放后重新居中地图...

非常感谢！

[编辑] API参考文档或其他地方绝对没有任何帮助...除非我眼瞎错过了！

- Jeremy Belolo

尝试在地图属性上将可拖动设置为false。 - duncan

已经设置了。这可以防止移动，这很好，但不能防止缩放... - Jeremy Belolo

这个问题解决了吗？我也遇到了同样的问题。 - floatleft

不好意思，自从我发了那个问题之后，我把它放在一边并处理了其他事情... 仍然希望有人能够帮助解决这个问题。 - Jeremy Belolo

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

我认为你可以禁用缩放并自己处理。 - danny117

4个回答

2

很遗憾，谷歌地图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>

- Stubbies

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

在安卓的Chrome 57上尝试了Codepen，但是我无法使用捏合缩放或平移地图。 - Dan Dascalescu

你现在可以滑动屏幕了，我目前没有安卓设备来测试捏合缩放，但是我发布的代码不应该阻止默认行为。就像我说的那样，需要对不同类型的事件进行值的归一化处理，以获得流畅的体验。 - Stubbies

2

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

完整代码请参见我的答案：https://dev59.com/X10b5IYBdhLWcg3wT_tr#30118649

- Odaym

结果发现OP正在寻找JavaScript解决方案，所以这个答案不适用。我也在寻找解决方案，所以我会在问题上设置赏金。 - Dan Dascalescu

0

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

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

你可以在这里看到一个例子，关于panTo函数的文档在这里。注意，它可能会搞乱所有可拖动的东西。

- Kaique Garcia

此示例将进入无限循环。 - HoangHieu

抱歉，我会将“setCenter”更正为“panTo”；感谢您的回复@HoangHieu。 - Kaique Garcia

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- HoangHieu · Accepted Answer

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