如何在另一个矩形绘制之前使矩形可见

时间:2013-05-13 06:01:11

标签: javascript google-maps

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

2 个答案:

答案 0 :(得分:0)

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

} }

参考此演示: Draw Rectangles in Area on Google Maps

答案 1 :(得分:0)

点击&#39;点击&#39;通过设置setMap(null)将矩形的事件侦听器移除,然后将其边界设置为最小值。可能你应该删除这些行并在鼠标移动&#39;事件检查&#39;州&#39;变量而不是使用getmap

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

请参阅更新的jsfiddle

相关问题