谷歌地图 - 帆布自定义背景画面缩放

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）添加canva s到覆盖

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

工作一切良好，除了当我放大，画布的大小保持不变。放大/缩小时是否可以缩放画布？任何指向例子的指针？

Answer 1

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

如果你只是想画一条线，看看google.maps.Polyline覆盖，具有内置的缩放功能性。

Answer 2

你很可能呈现为要支持任何谷歌的变焦水平的新画布。我已经解决这个问题的方法是在地图的“空闲”事件上设置一个监听器。一旦缩放或平移后地图变为空闲状态，这将会启动。然后，您可以确定缩放级别是否发生了变化并采取相应措施。

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