谷歌地图 - 画布自定义叠加缩放

Question

正如您所见： http://rolls.mit.edu/

我正在做以下事情：

1. 制作地图

   map = new google.maps.Map(mapContainer, options);
   

2. 添加叠加

   overlay = new google.maps.OverlayView();
   overlay.draw = function() {};
   overlay.setMap(map);
   

3. 将画布添加到叠加层

   overlay.getPanes().overlayLayer.appendChild(canvas);
   

一切都很好，除非我缩放，画布保持相同的大小。放大/缩小时是否可以缩放画布？有关示例的指示吗？

Answer 1

您需要收听google.maps.Map zoom_changed事件，从地图中获取新的缩放级别（使用map.getZoom（）），然后适当调整大小或修改canvas元素。

如果您只是想画一条线，请查看内置缩放功能的google.maps.Polyline叠加层。

Answer 2

您几乎必须为要支持的任何Google缩放级别渲染新画布。我解决这个问题的方法是在地图的“空闲”事件上设置一个监听器。一旦缩放或平移后地图变为空闲，这将触发。然后，您可以确定缩放级别是否已更改并采取相应措施。

var map = new google.maps.Map(mapContainer, options);
var zoomLevel = 6; //some defaut

var handleBoundsChanged = function(){
   var oldZoom = zoomLevel;
   var zoomLevel = map.getZoom();
   if( zoomLevel != oldZoom){
       rebuildOverlayForZoom(zoomLevel)
     }
}


google.maps.event.addListener (map, 'idle', handleBoundsChanged);