Googleマップのポリゴンシェイプ変更のマーカーの追加と削除

Question

初めてGoogleマップ描画ツールを試していますので、間違った方法などがわかったら、それを指摘できます。

基本的に、マーカーの追加と削除の作業は、マップ上で描画する図形や図形を編集したり再調整したりした後で行います。

私は3つの図形を使用します。 1.円2.長方形3.ポリゴン

円と矩形がうまく動作します。ポリゴンだけが正しく動作しません。 ポリゴン描画後および編集後にマーカを適切に表示または削除しません。

ここでは、細かく動作している円のコードを示します。

google.maps.event.addListener(drawingManager, 'circlecomplete', function (circle) { 
     var radius = circle.getRadius(); 
     drawingManager.setOptions({ 
      drawingControl: false 
     }); 
     drawingManager.setMap(null); 
     redondo = circle; 
     google.maps.event.addListener(redondo, 'radius_changed', function() { 

      for (i = 0; i < markers.length; i++) { 
       if (!(circle.getBounds().contains(markers[i].getPosition()))) 
       { 
        markers[i].setMap(null); 
        $('#prop' + i).hide(); 
       } else { 
        markers[i].setMap(map); 
        $('#prop' + i).show(); 
       } 
      } 
     }); 
    }); 

ポリゴンの場合：正しく動作しない。

google.maps.event.addListener(drawingManager, 'polygoncomplete', function (polygon) { 

     drawingManager.setOptions({ 
      drawingControl: false 
     }); 
     drawingManager.setMap(null); 
     redondo = polygon; 
     google.maps.event.addListener(redondo, 'bounds', function() { 

      for (i = 0; i < markers.length; i++) { 
       if((polygon.map.center.lat() < markers[i].getPosition().lat()) && (polygon.map.center.lng() < markers[i].getPosition().lng())) 
       { 
       markers[i].setMap(map); 
       $('#prop' + i).show(); 
      } else { 
       markers[i].setMap(null); 
        $('#prop' + i).hide(); 
      } 
      } 
     }); 
    }); 

Answer 1

まずはこのアレイを作成します。

circleOptions: { 
      fillColor: '#2A5C8D', 
      fillOpacity: 0.5, 
      strokeWeight: 5, 
      clickable: false, 
      editable: true, 
      zIndex: 1 
     }, 
     rectangleOptions: { 
      fillColor: '#2A5C8D', 
      fillOpacity: 0.5, 
      strokeWeight: 5, 
      clickable: false, 
      editable: true, 
      zIndex: 1 
     } 

が続いてGoogleの描画ツールのAPIこれはサークルのためにある

google.maps.event.addListener(drawingManager, 'circlecomplete', function (circle) { 

     drawingManager.setOptions({ 
      drawingControl: false 
     }); 
     drawingManager.setMap(null); 
     for (i = 0; i < markers.length; i++) { 
      if (!(circle.getBounds().contains(markers[i].getPosition()))) 
      { 
       markers[i].setMap(null); 
       $('#prop' + i).hide(); 
      } else { 
       markers[i].setMap(map); 
       $('#prop' + i).show(); 

      } 
     } 

    }); 

    google.maps.event.addListener(drawingManager, 'circlecomplete', function (circle) { 
     var radius = circle.getRadius(); 
     drawingManager.setOptions({ 
      drawingControl: false 
     }); 
     drawingManager.setMap(null); 
     redondo = circle; 
     google.maps.event.addListener(redondo, 'radius_changed', function() { 

      for (i = 0; i < markers.length; i++) { 
       if (!(circle.getBounds().contains(markers[i].getPosition()))) 
       { 
        markers[i].setMap(null); 
        $('#prop' + i).hide(); 
       } else { 
        markers[i].setMap(map); 
        $('#prop' + i).show(); 
       } 
      } 
     }); 
     google.maps.event.addListener(redondo, 'center_changed', function() { 

      for (i = 0; i < markers.length; i++) { 
       if (!(circle.getBounds().contains(markers[i].getPosition()))) 
       { 
        markers[i].setMap(null); 
        $('#prop' + i).hide(); 
       } else { 
        markers[i].setMap(map); 
        $('#prop' + i).show(); 
       } 
      } 
     }); 
    }); 

を使用して、同じことが長方形のために行きます。 これはうまくいくと思っています。