Düzenlenebilir bir çizim yönetmeni poligonunu Google Haritalar'da ön yükleme

Question

Kullanıcıların Google Haritalar API'sını kullanarak coğrafi çokgen "bölgeleri" oluşturmasına ve bunları bir veritabanına kaydetmesine olanak tanıyan bir uygulama yazıyorum. Her kullanıcı için yalnızca bir bölge olabilir, bu yüzden bunu el ile değiştirerek ve çizim araçlarını üst üste bindirerek sınırlandırıyorum. Bindirme tamamlandıktan sonra, kaydetme işlemini yapabildiğim ve veritabanımda sadece iyi kaydedebildiğim - bu yüzden bu bit çalışıyor. Dahası, poligonu veritabanından alıp haritada düzenlenebilir bir çokgen olarak görüntüleyebiliyorum. Gerçi karşılaşıyorum sorunlar şunlardır:

1. sokulan çokgenin noktalarını sürüklemeye çalışıyordu, onlar fareye "sıkışmış" olsun ve bırakın asla. Benim tahminim bir çeşit fareçık sorunu mu?

2. Halihazırda var olan bir çokgene rağmen, hala bir tane daha çizebilirim. Db'den çokgen yüklüyse çizim araçlarını daha önce saklamalı mıyım?

3. Veritabanından çekilen çokgen için bir olayı nasıl ekleyebilirim böylece köşedeki koordinatlarını yakalayabilirim?

Burada benim şimdiki kodunu görebilirsiniz: Aşağıdaki http://jsfiddle.net/FUUxz/ veya:

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: bu biraz eski ama biliyorum

<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

Benzer senaryo üzerinde çalışıyorlar. Bir veritabanından çokgenleri yükleme, düzenlenebilir olmalarına ve diğer çokgenlerin haritaya eklenmesine izin verme. Bunu yapmak için muhtemelen daha iyi yollar var ama bu işlevsel ve umarım doğru yolda başka birini alır.

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