Question

我最近在网站上集成了绘图功能。但我希望能够清除地图而无需为整个页面充电。

我遵循了关于Custom Controls的这个很好的例子，以便添加一个良好集成的按钮，对点击做出反应。

另外，我阅读了DrawingManager文档，您可以使用多种选项，但不清除地图。

基于自定义控件示例，我想做类似的事情：

    controlUI.addEventListener('click', function() {
      clearMap();
    });

但我不知道如何获取一系列绘制对象以便删除它们。

Answer 1

如果找不到绘制对象的数组，则至少可以创建一个。在您提供的链接的底部，有一些关于Drawing Events的内容。

因此，如果您想使用自定义控件清除地图，我们的想法是保存这些对象的列表，因为它们已创建。例如，使用圆形和矩形：

首先保持所需对象的全局数组（此处为圆形和矩形）：

var circles = [];
var rectangles = [];

然后初始化你的地图（它需要之前添加绘图API）：

function initMap(){
  // Your initializations
  initDrawings();
}

然后，根据需要初始化您的DrawingManager并添加事件监听器。别忘了添加控制按钮：

function initDrawings(){
  drawingManager = new google.maps.drawing.DrawingManager({
    drawingMode: null,
    drawingControl: true,
    drawingControlOptions: {
      position: google.maps.ControlPosition.BOTTOM_CENTER,
      drawingModes: ['circle', 'rectangle']
    },
    markerOptions: {icon: '/path/to/icon.png'},
    circleOptions: {
      fillColor: '#ffff00',
      fillOpacity: 0.25,
      strokeWeight: 3,
      zIndex: 1
    }
  });

  google.maps.event.addListener(drawingManager, 'circlecomplete', updateDrawings);
  google.maps.event.addListener(drawingManager, 'rectanglecomplete', updateDrawings);
  drawingManager.setMap(map);

  var eraseControlDiv = document.createElement('div');
  var eraseControl = new EraseButton(eraseControlDiv,map);

  eraseControlDiv.index = 1;
  map.controls[google.maps.ControlPosition.TOP_CENTER].push(eraseControlDiv);
}

function EraseButton(controlDiv, map) {
  var controlUI = document.createElement('div');
  controlUI.style.backgroundColor = '#fff';
  controlUI.style.border = '2px solid #fff';
  controlUI.style.borderRadius = '3px';
  controlUI.style.boxShadow = '0 2px 6px rgba(0,0,0,.3)';
  controlUI.style.cursor = 'pointer';
  controlUI.style.marginBottom = '20px';
  controlUI.style.textAlign = 'center';
  controlUI.title = 'Click to clear map';
  controlDiv.appendChild(controlUI);

  var controlText = document.createElement('div');
  controlText.style.color = 'rgb(25,25,25)';
  controlText.style.fontFamily = 'Roboto,Arial,sans-serif';
  controlText.style.fontSize = '12px';
  controlText.style.lineHeight = '38px';
  controlText.style.paddingLeft = '5px';
  controlText.style.paddingRight = '5px';
  controlText.innerHTML = 'Empty Map';
  controlUI.appendChild(controlText);

  controlUI.addEventListener('click', emptyMap);

}

这是检查触发 shapecomplete 事件的对象的shape的函数。它只是在相应的数组中添加了一个元素。

function updateDrawings(shape){
  if(shape == null) return;

  if(shape instanceof google.maps.Circle){
    circles.push(shape);
  }
  else if (shape instanceof google.maps.Rectangle) {
    rectangles.push(shape);
  }
}

在这里，我们将这些元素设置在地图之外，然后清除每个列表。

function emptyMap(){
  circles.forEach(function(e){
    e.setMap(null);
  });
  rectangles.forEach(function(e){
    e.setMap(null);
  });
  circles = [];
  rectangles = [];
}

如何使用按钮从GoogleMaps API清除地图？

1 个答案: