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

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

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

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

Answer 2

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

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