1

我正在尝试编写一些代码以允许用户在 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());
        }

    }
4

2 回答 2

6

这就是我如何设法计算在地图上绘制的多边形的面积，使用公制和英制单位。 

google.maps.event.addListener(drawingManager, 'polygoncomplete', (polygon) => {
  const polyPath = polygon.getPath()
  const measurement = google.maps.geometry.spherical.computeArea(polyPath)
  const squareMeters = measurement.toFixed(2)
  const squareFeet = (squareMeters * 10.7639).toFixed(2)

  drawingManager.setDrawingMode(null)
  polygon.setOptions({ zIndex: 1 })

  google.maps.event.addListener(polygon, 'mouseover', () => {
    measurementBox.setContent(`<p>${squareFeet} sqft.<p/>`)
    measurementBox.open(map)
  })

  google.maps.event.addListener(polygon, 'mousemove', (e) => {
    measurementBox.setPosition(e.latLng)
  })

  google.maps.event.addListener(polygon, 'mouseout', () => {
    measurementBox.close()
  })
})
于 2012-10-06T22:14:22.690 回答
0

我碰巧有这个使用 API 版本 2 制作的旧演示。您需要将其转换为 V3。如果您在转换时遇到问题，请告诉我。

*****已删除死链接*****

于 2012-07-03T10:59:39.320 回答