Question

我有一张地图，其中可以在谷歌地图上绘制n个标记，当用户在地图上绘制多边形时，我需要知道在多边形内绘制的制造商。

我试图在地图上绘制多边形，如下所示

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js"> </script>
    <style>
        html,body{height:100%;margin:0}
        #map_canvas{height:90%;}
    </style>
    <script>
        function initialize() {
            var myLatLng = {lat: 52.5498783, lng: 13.425209099999961};

            var mapOptions = {
                zoom: 14,
                center: new google.maps.LatLng(52.5498783, 13.425209099999961),
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
            var marker = new google.maps.Marker({
                position: myLatLng,
                map: map,
                title: 'Hello World!'
            });

            google.maps.event.addDomListener(map.getDiv(),'mousedown',function(e){
                //do it with the right mouse-button only
                if(e.button!=2)return;
                //the polygon
                poly=new google.maps.Polyline({map:map,clickable:false});
                //move-listener
                var move=google.maps.event.addListener(map,'mousemove',function(e){
                    poly.getPath().push(e.latLng);
                });
                //mouseup-listener
                google.maps.event.addListenerOnce(map,'mouseup',function(e){
                    google.maps.event.removeListener(move);

                        var path=poly.getPath();
                        poly.setMap(null);
                        poly=new google.maps.Polygon({map:map,path:path});

                });

            });
        }

        google.maps.event.addDomListener(window, 'load', initialize);

    </script>
</head>
<body>
Use the right mouse-button to draw an overlay<br/>

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

使用鼠标右键绘制

现在我只有一个标记，如何找到多边形内部的标记数量以及它们的纬度和经度，多边形可以是地图上的任何形状。

Answer 1

您可以使用containsLocation() function来确定标记是否位于多边形内。

此示例在标记落在指定多边形之外时绘制绿色多边形，在标记落在多边形内时绘制红色多边形。

＆＃13;

function initialize() {
    var myLatLng = { lat: 52.5498783, lng: 13.425209099999961 };

    var mapOptions = {
        zoom: 14,
        center: new google.maps.LatLng(52.5498783, 13.425209099999961),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
    var marker = new google.maps.Marker({
        position: myLatLng,
        map: map,
        title: 'Hello World!'
    });

    google.maps.event.addDomListener(map.getDiv(), 'mousedown', function (e) {
        //do it with the right mouse-button only
        if (e.button != 2) return;
        //the polygon
        var poly = new google.maps.Polyline({ map: map, clickable: false });
        //move-listener
        var move = google.maps.event.addListener(map, 'mousemove', function (e) {
            poly.getPath().push(e.latLng);
        });
        //mouseup-listener
        google.maps.event.addListenerOnce(map, 'mouseup', function (e) {
            google.maps.event.removeListener(move);

            var path = poly.getPath();
            poly.setMap(null);
            poly = new google.maps.Polygon({ map: map, path: path });

            var resultColor = google.maps.geometry.poly.containsLocation(marker.getPosition(), poly) ? 'green' : 'red';
            poly.setOptions({ fillColor: resultColor, strokeOpacity: 0.5 });

        });

    });
}

google.maps.event.addDomListener(window, 'load', initialize);

＆＃13;

html, body {
    height: 100%;
    margin: 0;
}

#map_canvas {
    height: 90%;
}

＆＃13;

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?&libraries=geometry"> </script>
Use the right mouse-button to draw an overlay<br />
<div id="map_canvas"></div>

＆＃13;

Answer 2

要获取多边形内部的标记数量，一个选项是在数组中保持对它们的引用，然后遍历该数组检查以查看标记是否在多边形中。要确定标记是否在多边形内，可以使用geometry library poly namespace method containsLocation：

  var markerCnt = 0;
  for (var i = 0; i < markers.length; i++) {
    if (google.maps.geometry.poly.containsLocation(markers[i].getPosition(), poly)) {
      markerCnt++;
    }
  }
  document.getElementById('numberMarkers').innerHTML += "There are " + markerCnt + " markers in the polygon<br>";

proof of concept fiddle

代码段

var markers = [];

function initialize() {

  var myLatLng = {
    lat: 52.5498783,
    lng: 13.425209099999961
  };

  var mapOptions = {
    zoom: 5,
    center: new google.maps.LatLng(52.5498783, 13.425209099999961),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
  var marker = new google.maps.Marker({
    position: myLatLng,
    map: map,
    title: 'Hello World!'
  });
  markers.push(marker);
  google.maps.event.addListener(map, 'bounds_changed', makeRandomMarkers);
  var poly;
  google.maps.event.addDomListener(map.getDiv(), 'mousedown', function(e) {
    //do it with the right mouse-button only
    if (e.button != 2) return;
    //the polygon
    if (poly && poly.setMap) {
      poly.setMap(null);
    }
    poly = new google.maps.Polyline({
      map: map,
      clickable: false
    });
    //move-listener
    var move = google.maps.event.addListener(map, 'mousemove', function(e) {
      poly.getPath().push(e.latLng);
    });
    //mouseup-listener
    google.maps.event.addListenerOnce(map, 'mouseup', function(e) {
      google.maps.event.removeListener(move);

      var path = poly.getPath();
      poly.setMap(null);
      poly = new google.maps.Polygon({
        map: map,
        path: path
      });
      var markerCnt = 0;
      for (var i = 0; i < markers.length; i++) {
        if (google.maps.geometry.poly.containsLocation(markers[i].getPosition(), poly)) {
          markerCnt++;
        }
      }
      document.getElementById('numberMarkers').innerHTML = "There are " + markerCnt + " markers in the polygon<br>";
    });

  });
}

function getRandom(min, max) {
  return Math.random() * (max - min + 1) + min;
}
google.maps.event.addDomListener(window, 'load', initialize);

function makeRandomMarkers() {
  var bounds = map.getBounds();
  var maxLat = bounds.getNorthEast().lat(); // 70;
  var minLat = bounds.getSouthWest().lat(); // 37;
  var maxLong = bounds.getNorthEast().lng(); // 50;
  var minLong = bounds.getSouthWest().lng(); // -8;


  for (var j = 0; j < 50; j++) {

    var marker = new google.maps.Marker({
      position: new google.maps.LatLng(getRandom(minLat, maxLat),
        getRandom(minLong, maxLong)),
      map: map
    });
    markers.push(marker);
  }
}

html,
body {
  height: 100%;
  margin: 0
}
#map_canvas {
  height: 90%;
}

<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry"></script>
Use the right mouse-button to draw an overlay
<br/>
<div id="numberMarkers"></div>
<div id="map_canvas"></div>

如何计算谷歌地图上手动绘制多边形内的标记数量

2 个答案: