Question

我尝试使用测量工具来计算多边形的面积和周长或折线的长度。我已经修改了与多边形一起使用的现有代码（在代码中注释掉了），但我没有让它与多边形和折线一起使用。

    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="UTF-8">
      <style>
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #map_div {
        height: 100%;
      }
    </style>

    <script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3.17&amp;sensor=false&amp;libraries=drawing"></script>
<script>
    function initialize() {
    map = new google.maps.Map(document.getElementById('map_div'), {
    center: {lat: 49.820, lng: 6.100},
    zoom: 8
    });
    // create a dialog box but dont bind it to anything yet    
    // myInfoWindow = new google.maps.InfoWindow();

    // show drawing tools
    DrawingTools();
}

function DrawingTools() {
    myDrawingManager = new google.maps.drawing.DrawingManager({
        drawingMode: null,
        drawingControl: true,
        drawingControlOptions: {
            position: google.maps.ControlPosition.TOP_LEFT,
            drawingModes: [
                google.maps.drawing.OverlayType.POLYGON,
                google.maps.drawing.OverlayType.POLYLINE
            ]
        },
        polygonOptions: {
            draggable: true,
            editable: true,
            fillColor: '#fb0a2a',
            fillOpacity: 0.2,
            strokeColor: '#fb0a2a',
            zIndex: 2000
        },
        polylineOptions: {
            draggable: true,
            editable: true,
            strokeColor: '#fb0a2a',
            zIndex:2000
        }
    });
    myDrawingManager.setMap(map);

    // when polygon drawing is complete, an event is raised by the map
    // this function will listen to the event and work appropriately
    DrawingCompletionListener();
};

/* Code that already works for polygones   
function DrawingCompletionListener() {
    // capture the field, set selector back to hand, remove drawing
    google.maps.event.addListener(
        myDrawingManager,
        'polygoncomplete',
        function(polygon) {
            myField = polygon;
            ShowDrawingTools(false);
            ObjectEditable(false);
            FieldClickListener();
        }
    );
}

*/
// Code I tried to get work for both polygones AND polylines 
function DrawingCompletionListener() {
    // capture the field, set selector back to hand, remove drawing
    google.maps.event.addListener(
        myDrawingManager,
        'overlaycomplete',
        function(event) {
        if (event.type == google.maps.drawing.OverlayType.POLYGON) {
        function pg (polygon) {
            myField = polygon;
            ShowDrawingTools(false);
            ObjectEditable(false);
            FieldClickListener();
        }}
        else if (event.type == google.maps.drawing.OverlayType.POLYLINE) {
            function pl (polyline) {
            myField = polyline;
            ShowDrawingTools(false);
            ObjectEditable(false);
            AddPropertyToField();
            FieldClickListener();
        }}
        }
    );
}

/**
 * Show or hide drawing tools
 */
function ShowDrawingTools(val) {
    myDrawingManager.setOptions({
        drawingMode: null,
        drawingControl: val
    });
}

/**
 * Allow or disallow polygon/polyline to be editable and draggable 
 */
function ObjectEditable(val) {
    myField.setOptions({
        editable: val,
        draggable: val
    });
    myInfoWindow.close();
    return false;
}

/**
 * Attach an event listener to the polygon/polyline. When a user clicks on the 
 * object, get a formatted message that contains links to re-edit the 
 * object, mark it as complete, or delete it. The message
 * appears as a dialog box
 */
function FieldClickListener() {
    google.maps.event.addListener(
        myField,
        'click',
        function(event) {
            var message = GetMessage(myField);
            myInfoWindow.setOptions({ content: message });
            myInfoWindow.setPosition(event.latLng);
            myInfoWindow.open(map);
        }
    );
}

/**
 * Delete the polygon and show the drawing tools so that new polygon can be
 * created
 */
function DeleteField() {
    myInfoWindow.close();
    myField.setMap(null);
    ShowDrawingTools(true);
}

/**
 * Get coordinates of the polygon/polyline and display information that should 
 * appear in the polygons dialog box when it is clicked
 */
function GetMessage(polygon) {
    var coordinates = polygon.getPath().getArray();
    var message = '';

    message += '<div>' 
        + 'area : ~' + GetArea(polygon) + ' ar<br />'
        + 'perimeter : ~' + GetPerimeter(polygon) + ' m'
        + 'length : ~' + GetLength(polyline) + ' m'
        + '</div>';

    message += '<hr><div class="btn-group"><button type="button" class="btn btn-primary btn-xs" onclick="PolygonEditable(true);">Edit</button>'
        + '<button type="button" class="btn btn-primary btn-xs" onclick="ObjectEditable(false);">OK</button>'
        + '<button type="button" class="btn btn-primary btn-xs" onclick="DeleteField(myField);">Löschen</button></div>';

    return message;
}

/**
 * Get area / perimeter of the drawn polygon
 */
function GetArea(poly) {
    var result = parseFloat(google.maps.geometry.spherical.computeArea(poly.getPath()))/100;
    return result.toFixed(2);
}
function GetPerimeter(poly) {
    var perimeter = parseFloat(google.maps.geometry.spherical.computeLength(poly.getPath()));
    return perimeter.toFixed(0);
}
function GetLenght(poly) {
    var length = parseFloat(google.maps.geometry.spherical.computeLength(poly.getPath()));
    return length.toFixed(0);
}
</script>
</head>
<body onload="initialize()">

<div id="map_div">
</div>
    </body>
    </html>

Answer 1

我已将'DrawingCompletionListener（）'函数更改为可用。

我还有一点问题。我想显示不同的信息，具体取决于绘制的对象类型。我在GetMessage（obj）函数中没有得到正确的语法来检查obj是多边形还是折线？这里是完整的代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #map_div {
        height: 100%;
      }
    </style>

<script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3.17&amp;sensor=false&amp;libraries=drawing"></script>
<script>
function initialize() {
    map = new google.maps.Map(document.getElementById('map_div'), {
    center: {lat: 49.820, lng: 6.100},
    zoom: 8
    });
    // create a dialog box but dont bind it to anything yet    
    myInfoWindow = new google.maps.InfoWindow();

    // show drawing tools
    DrawingTools();
}

function DrawingTools() {
    myDrawingManager = new google.maps.drawing.DrawingManager({
        drawingMode: null,
        drawingControl: true,
        drawingControlOptions: {
            position: google.maps.ControlPosition.TOP_LEFT,
            drawingModes: [
                google.maps.drawing.OverlayType.POLYGON,
                google.maps.drawing.OverlayType.POLYLINE
            ]
        },
        polygonOptions: {
            draggable: true,
            editable: true,
            fillColor: '#fb0a2a',
            fillOpacity: 0.2,
            strokeColor: '#fb0a2a',
            zIndex: 2000
        },
        polylineOptions: {
            draggable: true,
            editable: true,
            strokeColor: '#fb0a2a',
            zIndex:2000
        }
    });
    myDrawingManager.setMap(map);

    // when polygon drawing is complete, an event is raised by the map
    // this function will listen to the event and work appropriately
    DrawingCompletionListener();
};    

// Draw polygones or polylines and add clicklistener to open infoWindow 
function DrawingCompletionListener() {
    // capture the field, set selector back to hand, remove drawing
    google.maps.event.addListener(
        myDrawingManager,
        'overlaycomplete',
        function(event) {
        if (event.type == google.maps.drawing.OverlayType.POLYGON) {
            myField = event.overlay;  
            ShowDrawingTools(false);
            ObjectEditable(false);
            FieldClickListener(); 
        }
        else if (event.type == google.maps.drawing.OverlayType.POLYLINE) {
            myField = event.overlay;
            ShowDrawingTools(false);
            ObjectEditable(false);
            FieldClickListener();
    }
        }
    );
}


/**
 * Show or hide drawing tools
 */
function ShowDrawingTools(val) {
    myDrawingManager.setOptions({
        drawingMode: null,
        drawingControl: val
    });
}

/**
 * Allow or disallow polygon/polyline to be editable and draggable 
 */
function ObjectEditable(val) {
    myField.setOptions({
        editable: val,
        draggable: val
    });
    myInfoWindow.close();
    return false;
}

/**
 * Attach an event listener to the polygon/polyline. When a user clicks on the 
 * object, get a formatted message that contains links to re-edit the 
 * object, mark it as complete, or delete it. The message
 * appears as a dialog box
 */
function FieldClickListener() {
    google.maps.event.addListener(
        myField,
        'click',
        function(event) {
            var message = GetMessage(myField);
            myInfoWindow.setOptions({ content: message });
            myInfoWindow.setPosition(event.latLng);
            myInfoWindow.open(map);
        }
    );
}

/**
 * Delete the polygon / polyline and show the drawing tools again
 */
function DeleteField() {
    myInfoWindow.close();
    myField.setMap(null);
    ShowDrawingTools(true);
}

/**
 * Display information that should 
 * appear in the polygons / polylines dialog box when it is clicked
 */
function GetMessage(obj) {
    var message = '';

    // this is not yet working
    if (obj.type == google.maps.drawing.OverlayType.POLYGON) {
        message += '<div>' 
        + 'area : ' + GetArea(obj) + ' ar<br />'
        + 'perimeter : ' + GetLength(obj) + ' m <br />'
        + '</div>';
    }
    else if (obj.type == google.maps.drawing.OverlayType.POLYLINE) {
        message += '<div>' 
        + 'length : ' + GetLength(obj) + ' m <br />'
        + '</div>';
    }

    message += '<hr><div class="btn-group"><button type="button" class="btn btn-primary btn-xs" onclick="ObjectEditable(true);">Edit</button>'
        + '<button type="button" class="btn btn-primary btn-xs" onclick="ObjectEditable(false);">OK</button>'
        + '<button type="button" class="btn btn-primary btn-xs" onclick="DeleteField(myField);">Delete</button></div>';

    return message;
}

/**
 * Get area / perimeter / lenght of the drawn polygon / polyline
 */
function GetArea(obj) {
    var result = parseFloat(google.maps.geometry.spherical.computeArea(obj.getPath()))/100;
    return result.toFixed(2);
}
function GetLength(obj) {
       var length = parseFloat(google.maps.geometry.spherical.computeLength(obj.getPath()));
    return length.toFixed(0);
}
</script>
</head>
<body onload="initialize()">

<div id="map_div">
</div>
</body>
</html>

得到谷歌地图v3区域，周长和长度

1 个答案: