谷歌地圖繪製多邊形和計算區域

Question

我想寫一些代碼，以允許用戶在Google地圖上繪製多邊形，然後計算面積。但由於某些原因，當我點擊屏幕時，標記和多邊形不會顯示。任何人都可以幫助我。我添加的代碼：

var measure = { 
     mvcLine: new google.maps.MVCArray(), 
     mvcPolygon: new google.maps.MVCArray(), 
     mvcMarkers: new google.maps.MVCArray(), 
     line: null, 
     polygon: null 
    }; 

    function initialize() { 
     var myOptions = { 
      center: new google.maps.LatLng(orgn_lattitude, orgn_longitude), 
      zoom: 16, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     }; 

     var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 

     var marker = new google.maps.Marker({ position: new google.maps.LatLng(orgn_lattitude, orgn_longitude), map: map }) 

     google.maps.event.addListener(map, 'click', measureAdd); 
    } 

    function measureAdd(event) { 
     // Add a draggable marker to the map where the user clicked 
     var marker = new google.maps.Marker({ 
      position: event.latLng, 
      map: map, 
      draggable: true 
     }); 

     // Add this LatLng to our line and polygon MVCArrays 
     // Objects added to these MVCArrays automatically update the line and polygon shapes on the map 
     measure.mvcLine.push(latLng); 
     measure.mvcPolygon.push(latLng); 

     // Push this marker to an MVCArray 
     // This way later we can loop through the array and remove them when measuring is done 
     measure.mvcMarkers.push(marker); 

     // Get the index position of the LatLng we just pushed into the MVCArray 
     // We'll need this later to update the MVCArray if the user moves the measure vertexes 
     var latLngIndex = measure.mvcLine.getLength() - 1; 

     // When the measure vertex markers are dragged, update the geometry of the line and polygon by resetting the 
     //  LatLng at this position 
     google.maps.event.addListener(marker, "drag", function (evt) { 
      measure.mvcLine.setAt(latLngIndex, evt.latLng); 
      measure.mvcPolygon.setAt(latLngIndex, evt.latLng); 
     }); 

     // When dragging has ended and there is more than one vertex, measure length, area. 
     google.maps.event.addListener(marker, "dragend", function() { 
      if (measure.mvcLine.getLength() > 1) { 
       measureCalc(); 
      } 
     }); 

     // If there is more than one vertex on the line 
     if (measure.mvcLine.getLength() > 1) { 

      // If the line hasn't been created yet 
      if (!measure.line) { 

       // Create the line (google.maps.Polyline) 
       measure.line = new google.maps.Polyline({ 
        map: map, 
        clickable: false, 
        strokeColor: "#FF0000", 
        strokeOpacity: 1, 
        strokeWeight: 3, 
        path: measure.mvcLine 
       }); 

      } 

      // If there is more than two vertexes for a polygon 
      if (measure.mvcPolygon.getLength() > 2) { 

       // If the polygon hasn't been created yet 
       if (!measure.polygon) { 

        // Create the polygon (google.maps.Polygon) 
        measure.polygon = new google.maps.Polygon({ 
         clickable: false, 
         map: map, 
         fillOpacity: 0.25, 
         strokeOpacity: 0, 
         paths: measure.mvcPolygon 
        }); 

       } 

      } 

     } 

     // If there's more than one vertex, measure length, area. 
     if (measure.mvcLine.getLength() > 1) { 
      measureCalc(); 
     } 
    } 

    function measureCalc() { 

     // Use the Google Maps geometry library to measure the length of the line 
     var length = google.maps.geometry.spherical.computeLength(measure.line.getPath()); 

     // If we have a polygon (>2 vertexes in the mvcPolygon MVCArray) 
     if (measure.mvcPolygon.getLength() > 2) { 
      // Use the Google Maps geometry library to measure the area of the polygon 
      var area = google.maps.geometry.spherical.computeArea(measure.polygon.getPath()); 
     } 

    } 

Answer 1

我正好有這是與API版本2。你需要將其轉換爲V3使這個老演示。如果您在轉換時遇到問題，請告訴我。

http://maps.forum.nu/gm_drag_polygon.html

Answer 2

我這是怎麼設法計算多邊形的一次繪製的地圖上，以公制和英制單位的區域。

google.maps.event.addListener(drawingManager, 'polygoncomplete', function(polygon) { 
     var polyPath = polygon.getPath(); 
     var measurement = google.maps.geometry.spherical.computeArea(polyPath); 
     var squareMeters = measurement.toFixed(2); 
     var squareFeet = (squareMeters * 10.7639).toFixed(2);  
     drawingManager.setDrawingMode(null); 
     polygon.setOptions({zIndex:1}); 

     google.maps.event.addListener(polygon, 'mouseover', function(e) { 
      measurementBox.setContent('<p>'+ addCommas(squareFeet) + ' Square Feet <p/><p>' + addCommas(squareMeters) + ' Square Meters</p>'); 
      measurementBox.open(map); 
     }); 
     google.maps.event.addListener(polygon, 'mousemove', function(e) { 
      measurementBox.setPosition(e.latLng); 
     }); 
     google.maps.event.addListener(polygon, 'mouseout', function(e) { 
      measurementBox.close(); 
     });  
    });