如何绘制一个可编辑和可拖动的五边形，并找到是否有任何点在里面

How to draw an editable and draggable pentagon and find if any point lies inside it or not?

本文关键字：五边形 是否 在里面 任何点 绘制 何绘制 编辑 一个 拖动      更新时间：2023-09-26

我遇到了一个与使用google api绘制可编辑和可拖动的五边形相关的问题。

问题:当我尝试编辑多边形时，它的点不断增加。但我需要把它固定为5点。

代码: 

Poly1 = new google.maps.Polygon({
    Path: redCoords,
    fillColor:"#FF0000", 
    fillOpacity:0.2,
    strokeColor:"#FF0000",
    strokeOpacity:1.0,
    strokeWeight:1,
    draggable: true,
    editable: true
});

实际要求是:

我必须允许用户绘制最多10个五边形(可编辑和可拖动)，然后我需要找到我的点是否在多边形内。

下面是一些创建五边形的工作代码，每个坐标上都有标记。多边形本身是不可编辑的…当用户拖动其中一个标记时，我们重新绘制多边形。

<!DOCTYPE html>
<html>
<head>
<title>Draggable polygons</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
</style>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script>
    function initialize() {
        var map = new google.maps.Map(document.getElementById("map_canvas"), {
            zoom: 15,
            center: {lat: 51.476706, lng: 0},
            mapTypeId: google.maps.MapTypeId.ROADMAP
        });
        // create an array of coordinates for a pentagonal polygon
        var arrCoords = [
            new google.maps.LatLng(51.474821, -0.001935),
            new google.maps.LatLng(51.474647, 0.003966),
            new google.maps.LatLng(51.477708, 0.004073),
            new google.maps.LatLng(51.479753, 0.000468),
            new google.maps.LatLng(51.477654, -0.002192)
        ];
        var polygon = new google.maps.Polygon({
            paths: arrCoords,
            strokeColor: "#FF0000",
            strokeOpacity: 0.8,
            strokeWeight: 2,
            fillColor: "#FF0000",
            fillOpacity: 0.35,
            map: map
        });
        // add a marker at each coordinate
        for (var i = 0; i < arrCoords.length; i++) {
             var marker = new google.maps.Marker({
                position: arrCoords[i],
                map: map,
                draggable: true
            });
            bindMarker(marker, arrCoords, i, polygon);
        }
    }
    function bindMarker(marker, arrCoords, i, polygon) {
        google.maps.event.addListener(marker, 'dragend', function(e) {
            // update the coordinates of the corresponding point in the polygon path
            arrCoords[i] = e.latLng;
            polygon.setPath(arrCoords);
        });
    }
    google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
    <div id="map_canvas"></div>
</body>
</html>

你的问题的第二部分，即如何检测一个点是否在多边形内，实际上是一个单独的问题。

相关文章：