javascript - 如何使矩形可见，直到绘制另一个矩形

Question

我正在尝试在谷歌地图上绘制一个矩形。绘制矩形成功后，我得到了绑定值。但是矩形不可见，这是我的问题。请帮助我看到可见的矩形，直到绘制另一个矩形。

Answer 1

在矩形的“单击”事件侦听器中，您通过设置 setMap(null) 将其删除，然后将其边界设置为最小值。可能您应该删除这些行并在“mousemove”事件上检查“状态”变量，而不是使用 getmap

if (state==1) {
    rect.setBounds(toBounds(pt1, event.latLng));
}

查看更新的 jsfiddle

Answer 2

      function onPolygonComplete(polygon) {
     var bounds, paths, sw, ne, ystep, xstep,
     boxH, boxW, posArry, flag, pos,
     x, y, i, box, maxBoxCnt;

   //Delete old boxes.
   boxes.forEach(function(box, i) {
    box.setMap(null);
        delete box;
      });

     //Calculate the bounds that contains entire polygon.
       bounds = new google.maps.LatLngBounds();
      paths = polygon.getPath();
     paths.forEach(function(latlng, i){
       bounds.extend(latlng);
       });


      //Calculate the small box size.
       maxBoxCnt = 8; 
     sw = bounds.getSouthWest();
      ne = bounds.getNorthEast();
       ystep = Math.abs(sw.lat() - ne.lat()) / maxBoxCnt;
        boxH = Math.abs(sw.lat() - ne.lat()) / (maxBoxCnt + 1);
       xstep = Math.abs(sw.lng() - ne.lng()) / maxBoxCnt;
      boxW = Math.abs(sw.lng() - ne.lng()) / (maxBoxCnt + 1); 

        for (y = 0; y < maxBoxCnt; y++) {
          for (x = 0; x < maxBoxCnt; x++) {
           //Detect that polygon is able to contain a small box.
        bounds = new google.maps.LatLngBounds();
          posArry = [];
         posArry.push(new google.maps.LatLng(sw.lat() + ystep * y, sw.lng() + xstep *     x));
  posArry.push(new google.maps.LatLng(sw.lat() + ystep * y, sw.lng() + xstep * x + boxW));
  posArry.push(new google.maps.LatLng(sw.lat() + ystep * y + boxH, sw.lng() + xstep * x));
  posArry.push(new google.maps.LatLng(sw.lat() + ystep * y + boxH, sw.lng() + xstep * x + boxW));
  flag = true;
  for (i = 0; i < posArry.length; i++) {
    pos = posArry[i];
    if (flag) {
      flag = google.maps.geometry.poly.containsLocation(pos, polygon);
      bounds.extend(pos);
    }
  }

  //Draw a small box.
  if (flag) {
    box = new google.maps.Rectangle({
      bounds : bounds,
      map : mapCanvas,
      strokeColor: '#00ffff',
      strokeOpacity: 0.5,
      strokeWeight: 1,
      fillColor: '#00ffff',
      fillOpacity : 0.5,
      clickable: false
    });
    boxes.push(box);
  }
}

} }

并参考这个演示：在谷歌地图上绘制区域中的矩形