Wstępne ładowanie edytowalnego wieloboku rysownika w Google Maps

Question

Piszę aplikację, która pozwoli użytkownikom narysować "strefy" geograficzne za pomocą Google Maps API i zapisać je w bazie danych. Dla każdego użytkownika może być tylko jedna strefa, więc ograniczam to, przełączając się na dłoń i ukrywając narzędzia do rysowania na overlaycomplete. Po overlaycomplete, jestem w stanie trafić zapisać i zapisuje w mojej bazie danych dobrze - więc ten kawałek działa. Ponadto jestem w stanie pobrać wielokąt z bazy danych i wyświetlić go jako edytowalny wielokąt na mapie. Kwestie Mam mimo to:

1. Gdy próbuje przeciągnąć punkty wstawionego wielokąta, dostają „Stuck” na myszy i nigdy nie zwalnia. Zgaduję, że to jakiś problem z mouseupem?

2. Mimo istniejącego wielokąta nadal mogę narysować inny. Czy powinienem po prostu ukryć narzędzia do rysowania na początku, jeśli wielobok jest ładowany z bazy danych?

3. Jak dołączyć wydarzenie do wielokątów pobieranych z bazy danych, aby można było uchwycić współrzędne jego wierzchołków?

Można zobaczyć mój aktualny kod tutaj: http://jsfiddle.net/FUUxz/ lub poniżej:

JS:

  var map; // Global declaration of the map 
      var iw = new google.maps.InfoWindow(); // Global declaration of the infowindow 
      var lat_longs = new Array(); 
      var markers = new Array(); 
      var drawingManager; 
      function initialize() { 

       var myLatlng = new google.maps.LatLng(40.9403762, -74.1318096); 
       var myOptions = { 
        zoom: 13, 
        center: myLatlng, 
        mapTypeId: google.maps.MapTypeId.ROADMAP} 
       map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
       drawingManager = new google.maps.drawing.DrawingManager({ 
       drawingMode: google.maps.drawing.OverlayType.POLYGON, 
       drawingControl: true, 
       drawingControlOptions: { 
        position: google.maps.ControlPosition.TOP_CENTER, 
        drawingModes: [google.maps.drawing.OverlayType.POLYGON] 
       }, 
         polygonOptions: {editable:true,fillColor:'#ff0000',strokeColor:'#ff0000',strokeWeight:2} 
      }); 
      drawingManager.setMap(map); 

      google.maps.event.addListener(drawingManager, "overlaycomplete", function(event) { 
       var newShape = event.overlay; 
       newShape.type = event.type; 
       if (event.type==google.maps.drawing.OverlayType.POLYGON) { 
         overlayClickListener(event.overlay);$('#polygon').val(event.overlay.getPath().getArray());drawingManager.setOptions({drawingMode:null,drawingControl:false}); 
        } 

      }); 
       var polygon_plan_0 = [ 
        new google.maps.LatLng(40.9534555976547, -74.0871620178223) 
        , 
        new google.maps.LatLng(40.9410084152192, -74.0948867797852) 
        , 
        new google.maps.LatLng(40.9411380854622, -74.1165161132812) 
        , 
        new google.maps.LatLng(40.9490474888751, -74.1221809387207) 
        , 
        new google.maps.LatLng(40.955140973234, -74.124584197998) 
        , 
        new google.maps.LatLng(40.9604561066844, -74.1153144836426) 
        , 
        new google.maps.LatLng(40.9534555976547, -74.0871620178223) 
        ]; 
        lat_longs.push(new google.maps.LatLng(40.9534555976547, -74.0871620178223)); 

        lat_longs.push(new google.maps.LatLng(40.9410084152192, -74.0948867797852)); 

        lat_longs.push(new google.maps.LatLng(40.9411380854622, -74.1165161132812)); 

        lat_longs.push(new google.maps.LatLng(40.9490474888751, -74.1221809387207)); 

        lat_longs.push(new google.maps.LatLng(40.955140973234, -74.124584197998)); 

        lat_longs.push(new google.maps.LatLng(40.9604561066844, -74.1153144836426)); 

        lat_longs.push(new google.maps.LatLng(40.9534555976547, -74.0871620178223)); 

      var polygon_0 = new google.maps.Polygon({ 
       path: polygon_plan_0, 

       strokeColor: "#ff0000", 
       strokeOpacity: 0.8, 
       strokeWeight: 2, 
       fillColor: "#ff0000", 
       fillOpacity: 0.3, 
       editable: true 
      }); 

      polygon_0.setMap(map); 


      google.maps.event.addListener(polygon_0, "mouseup", function(event) { 
       overlayClickListener(event.overlay);$('#polygon').val(event.overlay.getPath().getArray());drawingManager.setOptions({drawingMode:null,drawingControl:false}); 
      }); 


      } 


     function createMarker(markerOptions) { 
      var marker = new google.maps.Marker(markerOptions); 
      markers.push(marker); 
      lat_longs.push(marker.getPosition()); 
      return marker; 
     } 

initialize(); 

function overlayClickListener(overlay) { 
    google.maps.event.addListener(overlay, "mouseup", function(event){ 
     $('#polygon').val(overlay.getPath().getArray()); 
    }); 
} 

HTML:

<div id="map_canvas" style="width:100%; height:450px;"></div> 
<form action="http://garbagedayreminder.com/test/save" method="post" accept-charset="utf-8" id="map_form"> 
<input type="text" name="polygon" value="" id="polygon" /> 
<input type="submit" name="save" value="Save!" id="save" /> 
</form> 

Answer 1

wiem, że to jest trochę starszy, ale ja pracowali nad podobnym scenariuszem. Ładowanie wieloboków z bazy danych, umożliwiając ich edycję i dodawanie innych wielokątów do mapy. Prawdopodobnie istnieją lepsze sposoby na zrobienie tego, ale jest to funkcjonalne i mam nadzieję, że ktoś inny na dobrej drodze.

 var areas = (<?php echo json_encode($areas);?>); 
    var coords = (<?php echo json_encode($coords);?>); 

    var drawingManager; 
    var selectedShape; 
    var colors = ['#1E90FF', '#FF1493', '#32CD32', '#FF8C00', '#4B0082']; 
    var selectedColor; 
    var colorButtons = {}; 

    // Saving vars 
    var selectedShape; 
    var contentString; 
    var polygons = []; 
    var newPolys = []; 

    function clearSelection() { 
    if (selectedShape) { 
     selectedShape.setEditable(false); 
     selectedShape = null; 
    } 
    } 

    function setSelection(shape) { 
    clearSelection(); 
    selectedShape = shape; 
    shape.setEditable(true); 
    selectColor(shape.get('fillColor') || shape.get('strokeColor')); 
    } 

    function deleteSelectedShape(e) { 
    if (selectedShape) { 
     selectedShape.setMap(null); 
     for (i=0; i < polygons.length; i++) { // Clear out the polygons entry 
     if (selectedShape.getPath == polygons[i].getPath) { 
      polygons.splice(i, 1); 
     } 
     } 
    } 
    } 

    function selectColor(color) { 
    selectedColor = color; 
    for (var i = 0; i < colors.length; ++i) { 
     var currColor = colors[i]; 
     colorButtons[currColor].style.border = currColor == color ? '2px solid #789' : '2px solid #fff'; 
    } 

    // Retrieves the current options from the drawing manager and replaces the 
    // stroke or fill color as appropriate. 
    var polylineOptions = drawingManager.get('polylineOptions'); 
    polylineOptions.strokeColor = color; 
    drawingManager.set('polylineOptions', polylineOptions); 

    var rectangleOptions = drawingManager.get('rectangleOptions'); 
    rectangleOptions.fillColor = color; 
    drawingManager.set('rectangleOptions', rectangleOptions); 

    var circleOptions = drawingManager.get('circleOptions'); 
    circleOptions.fillColor = color; 
    drawingManager.set('circleOptions', circleOptions); 

    var polygonOptions = drawingManager.get('polygonOptions'); 
    polygonOptions.fillColor = color; 
    drawingManager.set('polygonOptions', polygonOptions); 
    } 

    function setSelectedShapeColor(color) { 
    if (selectedShape) { 
     if (selectedShape.type == google.maps.drawing.OverlayType.POLYLINE) { 
     selectedShape.set('strokeColor', color); 
     } else { 
     selectedShape.set('fillColor', color); 
     } 
    } 
    } 

    function makeColorButton(color) { 
    var button = document.createElement('span'); 
    button.className = 'color-button'; 
    button.style.backgroundColor = color; 
    google.maps.event.addDomListener(button, 'click', function() { 
     selectColor(color); 
     setSelectedShapeColor(color); 
    }); 

    return button; 
    } 

    function buildColorPalette() { 
    var colorPalette = document.getElementById('color-palette'); 
    for (var i = 0; i < colors.length; ++i) { 
     var currColor = colors[i]; 
     var colorButton = makeColorButton(currColor); 
     colorPalette.appendChild(colorButton); 
     colorButtons[currColor] = colorButton; 
    } 
    selectColor(colors[0]); 
    } 

    function initialize() { 
     var map = new google.maps.Map(document.getElementById('map'), { 
     zoom: 7, 
     center: new google.maps.LatLng(40.2444, -111.6608),   // Utah default coords 
     mapTypeId: google.maps.MapTypeId.Terrain, 
     disableDefaultUI: true, 
     zoomControl: true 
    }); 

    var polyOptions = { 
     strokeWeight: 0, 
     fillOpacity: 0.45, 
     editable: true 
    }; 


    // Creates a drawing manager attached to the map that allows the user to draw 
    // markers, lines, and shapes. 
    drawingManager = new google.maps.drawing.DrawingManager({ 
     drawingMode: google.maps.drawing.OverlayType.POLYGON, 
     drawingControlOptions: { 
     drawingModes: [google.maps.drawing.OverlayType.POLYGON]}, 
     markerOptions: { 
     draggable: true 
     }, 
     polylineOptions: { 
     editable: true 
     }, 
     rectangleOptions: polyOptions, 
     circleOptions: polyOptions, 
     polygonOptions: polyOptions, 
     map: map 
    }); 

    google.maps.event.addListener(drawingManager, 'overlaycomplete', function(e) { 
     if (e.type != google.maps.drawing.OverlayType.MARKER) { 
     // Switch back to non-drawing mode after drawing a shape. 
     drawingManager.setDrawingMode(null); 
     // Add an event listener that selects the newly-drawn shape when the user 
     // mouses down on it. 
     var newShape = e.overlay; 
     newShape.type = e.type; 
     polygons.push(newShape); 

     setSelection(newShape); 


     google.maps.event.addListener(newShape, 'click', function() { 
      setSelection(newShape); 
     }); 

     google.maps.event.addListener(newShape, 'mouseup', function() { 
      for (i=0; i < polygons.length; i++) { // Clear out the old polygons entry 
      if (newShape.getPath == polygons[i].getPath) { 
       polygons.splice(i, 1); 
      } 
      } 
      polygons.push(newShape); 
     }); 
     } 
    }); 


    // Clear the current selection when the drawing mode is changed, or when the 
    // map is clicked. 
    google.maps.event.addListener(drawingManager, 'drawingmode_changed', clearSelection); 
    google.maps.event.addListener(map, 'click', clearSelection); 
    google.maps.event.addDomListener(document.getElementById('delete-button'), 'click', deleteSelectedShape); 

    buildColorPalette(); 


    /* Load Shapes that were previously saved */ 
    for (var inc = 0, ii = areas.length; inc < ii; inc++) { 
     var newCoords = []; 
     for (var c = 0, cc = coords.length; c < cc; c++) { 
      if (coords[c].polygon == areas[inc].polygon) { 
      var point = coords[c]; 
      newCoords.push(new google.maps.LatLng(point.lat, point.lng)); 
      } 
     } 

     newPolys[inc] = new google.maps.Polygon({ 
     path: newCoords, 
     strokeWeight: 0, 
     fillColor: areas[inc].fillColor, 
     fillOpacity: areas[inc].fillOpacity 
     }); 
     newPolys[inc].setMap(map); 
     polygons.push(newPolys[inc]); 
     addNewPolys(newPolys[inc]); 
    } 


    function addNewPolys(newPoly) { 
     google.maps.event.addListener(newPoly, 'click', function() { 
      setSelection(newPoly); 
     }); 
    } 

    } 

    google.maps.event.addDomListener(window, 'load', initialize);