谷歌地图-画布自定义覆盖缩放

Google Maps - canvas custom overlay zoom

本文关键字：覆盖 缩放 自定义 -画 谷歌地图      更新时间：2023-09-26

如您所见：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);

一切都很好，只是当我缩放时，画布保持不变。放大/缩小时是否可以缩放画布？有什么例子吗？

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

如果你只想画一条线，可以看看google.maps.Polyline覆盖，它内置了缩放功能。

您几乎必须为您想要支持的任何谷歌缩放级别渲染一个新的画布。我解决这个问题的方法是在映射的"空闲"事件上设置一个侦听器。一旦缩放或平移后地图变为空闲状态，就会触发此项。然后，您可以确定缩放级别是否发生了更改，并采取相应的行动。

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);
相关文章：