如何在Google地图中的多边形内添加随机点?

问题描述 投票:1回答:1

我对一个地方有界限,并创建了那个地方的多边形。如何在该多边形的边界内生成随机点?

google-maps-api-3 google-maps-markers google-polyline
1个回答
8
投票

一种方法。这将计算多边形的边界,然后猜测边界内的随机点,如果该点包含在多边形中,则会在其中放置一个标记。

// calculate the bounds of the polygon
var bounds = new google.maps.LatLngBounds();

for (var i=0; i < polygon.getPath().getLength(); i++) {
    bounds.extend(polygon.getPath().getAt(i));
}

var sw = bounds.getSouthWest();
var ne = bounds.getNorthEast();

// Guess 100 random points inside the bounds, 
// put a marker at the first one contained by the polygon and break out of the loop
for (var i = 0; i < 100; i++) {
   var ptLat = Math.random() * (ne.lat() - sw.lat()) + sw.lat();
   var ptLng = Math.random() * (ne.lng() - sw.lng()) + sw.lng();
   var point = new google.maps.LatLng(ptLat,ptLng);
   if (google.maps.geometry.poly.containsLocation(point,polygon)) {
     var marker = new google.maps.Marker({position:point, map:map});
     break;
   }
}

working fiddle

working fiddle with up to 100 random points

var polygon;

function initialize() {
  var map = new google.maps.Map(document.getElementById("map"),
    {
        zoom: 4,
        center: new google.maps.LatLng(22.7964, 79.8456),
        mapTypeId: google.maps.MapTypeId.HYBRID
    });

    var coords =
    [
        new google.maps.LatLng(18.979026,72.949219), //Mumbai
        new google.maps.LatLng(28.613459,77.255859), //Delhi
        new google.maps.LatLng(22.512557,88.417969), //Kolkata
        new google.maps.LatLng(12.940322,77.607422) //Bengaluru
    ];

    polygon = new google.maps.Polygon({
        paths: coords,
        strokeColor: "#0000FF",
        strokeOpacity: 0.8,
        strokeWeight: 2,
        fillColor: "#0000FF",
        fillOpacity: 0.26
    });

    polygon.setMap(map);

    var bounds = new google.maps.LatLngBounds();
    
    for (var i=0; i < polygon.getPath().getLength(); i++) {
        bounds.extend(polygon.getPath().getAt(i));
    }
    var sw = bounds.getSouthWest();
    var ne = bounds.getNorthEast();
    for (var i = 0; i < 100; i++) {
       var ptLat = Math.random() * (ne.lat() - sw.lat()) + sw.lat();
       var ptLng = Math.random() * (ne.lng() - sw.lng()) + sw.lng();
       var point = new google.maps.LatLng(ptLat,ptLng);
       if (google.maps.geometry.poly.containsLocation(point,polygon)) {
         var marker = new google.maps.Marker({position:point, map:map});
         var infowindow = new google.maps.InfoWindow({});
           google.maps.event.addListener(marker, "click", function(evt) {
               infowindow.setContent(marker.getPosition().toUrlValue(6));
               infowindow.open(map, marker);
           });
         break;
       }
    }

}
        
        google.maps.event.addDomListener(window, 'load', initialize);
<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map" style="width: 530px; height: 500px">
</div>
© www.soinside.com 2019 - 2024. All rights reserved.