使用 API 为 Google 地图创建“放大镜效果”

Question

我可以使用普通的 Google 地图 API 功能放大 Google 地图。例如，我在地图上绘制一个边界框，Google API 将按默认值设置的量进行放大。但是，在具有大量轨迹的地图上一直手动放大非常耗时，因为您需要不断地放大和缩小来寻找某些特征。

我有一个我想要实现的原型，它捕获

Google Maps rectangle

secondaryMap

中

div

下的区域。最后一步是将缩放后的

secondaryMap

复制到

rectangle = new google.maps.Rectangle

中，如箭头所示。

我已经尝试过这个

rectangleElement.appendChild(secondaryMap);

，但正如预期的那样，它不起作用并产生异常：

Uncaught (in promise) TypeError: Node.appendChild: Argument 1 does not implement interface Node.

StackOverflow 上对此错误有一些答案，但似乎没有一个适用。任何帮助将不胜感激。

`function initializeMaps() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 1,
    center: { lat: 0, lng: 0 },
    disableDefaultUI: true,
  });
  const mapContainer = document.getElementById('mapContainer');
  const rectangleElement = document.getElementById('rectangle');

  secondaryMap = new google.maps.Map(document.getElementById('rectangle'), {
    zoom: 6,
    center: map.getCenter(), // Initial center
    disableDefaultUI: true,
    draggable: false,
    scrollwheel: false,
    disableDoubleClickZoom: true,
  });

  rectangle = new google.maps.Rectangle({
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#FF0000',
    fillOpacity: 0.35,
    map: map,
    bounds: {
      north: 0,
      south: -10,
      east: 10,
      west: 0,
    },
    draggable: true,
    editable: true,
  });

  rectangle.addListener('bounds_changed', updateSecondaryMap);

  function updateSecondaryMap() {
    const bounds = rectangle.getBounds();
    secondaryMap.setCenter(bounds.getCenter());
  }

 rectangleElement.appendChild(secondaryMap);
  // Initialize the rectangle's position
  updateSecondaryMap();
}
// Initialize the maps when the Google Maps API is loaded
function initMap() {
  initializeMaps();
} `

Answer 1

这是一种可能的解决方案，需要两个地图实例，

1. 主地图 - 1 个实例，具有基于 事件侦听器的悬停/单击侦听器，以获取像 this 这样的 latLong。
2. 叠加地图 - 2 实例，从地图 -1 获取经纬度并创建经纬度边界以适合具有所需缩放级别的叠加地图。
3. 使用 MapCanvasProjection
将叠加地图放置在主地图上

或者，您可以使用静态地图 API，而不是步骤 2。