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

这就是我设法计算一旦在地图上绘制的多边形面积，包括公制和英制单位。

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

Answer 2

我碰巧有这个用API版本2制作的旧演示。你需要将它转换为V3。如果您在转换时遇到问题，请与我们联系。

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

Google地图绘制多边形和计算面积

2 个答案: