Блог

Главная - Вопросы по программированию - Google Maps API: Как можно было бы подсчитать количество маркеров, размещенных в уже созданном полигоне?

Google Maps API: Как можно было бы подсчитать количество маркеров, размещенных в уже созданном полигоне?

#javascript #google-maps-api-3 #polygon

Вопрос:

Поэтому в настоящее время я пытаюсь подсчитать и отследить количество маркеров, размещенных в созданном полигоне на моей карте, просматривая массив маркеров и используя функцию containsLocation (), однако всякий раз, когда я пытаюсь вывести количество маркеров, ничего не происходит. Любая помощь была бы очень признательна.

 var map;
var area = "Update Polygon to show area";
var vertices = [];
var poly;
var markers = [];
var markerCnt = 0;
document.getElementById("myLog").innerHTML = area; //"Update Polygon to show area";

function createMap () {
    var x = 42.886,
        y = -78.878,
        diff = 0.0033;

    var choices = {
        center: { lat: x, lng: y },
        mapTypeId: 'satellite',
        disableDefaultUI: true,
        zoom: 16
    };

    map = new google.maps.Map(document.getElementById('map'), choices);

    var polygonCoordinates = [
        { lat: x - diff, lng: y - diff },
        { lat: x   diff, lng: y - diff },
        { lat: x   diff, lng: y   diff },
        { lat: x - diff, lng: y   diff },
    ];

    let polygon = new google.maps.Polygon({
        map: map,
        paths: polygonCoordinates,
        clickable: false,
        strokeColor: 'red',
        fillColor: 'red',
        fillOpacity: 0.4,
        draggable: true,
        editable: true
    });

    document.getElementById("markerCnt").innerHTML = "# of nodes inside highlighted area: "   markerCnt;

    google.maps.event.addListener(polygon.getPath(), 'set_at', function() {
        PolyArray(polygon.getPath());
        area = google.maps.geometry.spherical.computeArea(polygon.getPath());
        console.log("Area inside highlighted area: "   area   " meters squared");
        document.getElementById("myLog").innerHTML = "Area inside highlighted area: "   area   " meters squared";
    });
    google.maps.event.addListener(polygon.getPath(), 'insert_at', function() {
        PolyArray(polygon.getPath());
        area = google.maps.geometry.spherical.computeArea(polygon.getPath());
        console.log("Area inside highlighted area: "   area   " meters squared");
        document.getElementById("myLog").innerHTML = "Area inside highlighted area: "   area   " meters squared";
    });

    map.addListener("click", (event) => {
        addMarker(event.latLng);
    });
    document.getElementById("clear-markers").addEventListener("click", clearMarkers);
    document.getElementById("polygon-move").addEventListener("click", function(){
        polygon.setOptions({clickable: true});

    });
    document.getElementById("polygon-stay").addEventListener("click", function(){
        polygon.setOptions({clickable: false});

    });
    for (var i = 0; i < markers.length; i  ) {
        if (google.maps.geometry.poly.containsLocation(markers[i].getPosition(), polygon)) {
            markerCnt  ;
        }
        document.getElementById("markerCnt").innerHTML = "# of nodes inside highlighted area: "   markerCnt;
    }
}

function addMarker(position) {
    const marker = new google.maps.Marker({
        position,
        map,
    });
    markers.push(marker);
}

function setMapOnAll(map) {
    for (let i = 0; i < markers.length; i  ) {
        markers[i].setMap(map);
    }
}

function clearMarkers() {
    setMapOnAll(null);
    markers = [];
}

function PolyArray (array) {
    vertices = [];

    for (var i = 0; i < array.getLength(); i  ) {
        vertices.push({
            lat: array.getAt(i).lat(),
            lng: array.getAt(i).lng()
        });
    }
    console.log(vertices);
} 
 <!DOCTYPE html>
<html>
<head>
    <title>Map</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
    <meta name="viewport" content="initial-scale=1.0">
    <meta charset="utf-8">

    <style>
        div#map{
            height:500px;
        }
    </style>
</head>
<body>

<div class="container-fluid">
    <div class="row">
        <div class="col">
            <h1 class="display-4">5G Map</h1>
        </div>
    </div>
    <div class="row">
        <div class="col">
            <div id="floating-panel">
                <input id="clear-markers" type="button" value="Clear Markers On Map" />
            <div id="map"></div>
                <div id="floating-panel-2">
                    <input id="polygon-move" type="button" value="Make Polygon Movable" />
                    <input id="polygon-stay" type="button" value="Make Polygon Stationary to Add Markers" />
                <div id="myLog"></div>
                    <div id="markerCnt"></div>
                </div>
            </div>
        </div>
    </div>
</div>

        <script src="script.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qkamp;callback=createMapamp;libraries=geometry" async defer></script>
</body>
</html>

Ответ №1:

  1. для опубликованного примера сделайте полигон глобальным.
  2. сделайте код, который подсчитывает маркеры, функцией, вызывайте его всякий раз, когда происходит что-то, что может изменить количество маркеров (добавление маркера, редактирование пути полигона и т. Д.).
  3. очистите отображаемое количество маркеров при удалении маркеров.

скриншот результирующей карты

рабочий фрагмент кода:

 var map;
var area = "Update Polygon to show area";
var vertices = [];
let polygon;
var markers = [];
var markerCnt = 0;
document.getElementById("myLog").innerHTML = area; //"Update Polygon to show area";

function createMap () {
    var x = 42.886,
        y = -78.878,
        diff = 0.0033;

    var choices = {
        center: { lat: x, lng: y },
        mapTypeId: 'satellite',
        disableDefaultUI: true,
        zoom: 16
    };

    map = new google.maps.Map(document.getElementById('map'), choices);

    var polygonCoordinates = [
        { lat: x - diff, lng: y - diff },
        { lat: x   diff, lng: y - diff },
        { lat: x   diff, lng: y   diff },
        { lat: x - diff, lng: y   diff },
    ];

    polygon = new google.maps.Polygon({
        map: map,
        paths: polygonCoordinates,
        clickable: false,
        strokeColor: 'red',
        fillColor: 'red',
        fillOpacity: 0.4,
        draggable: true,
        editable: true
    });

    google.maps.event.addListener(polygon.getPath(), 'set_at', function() {
        PolyArray(polygon.getPath());
        area = google.maps.geometry.spherical.computeArea(polygon.getPath());
        console.log("Area inside highlighted area: "   area   " meters squared");
        document.getElementById("myLog").innerHTML = "Area inside highlighted area: "   area   " meters squared";
        countMarkersInPolygon();
    });
    google.maps.event.addListener(polygon.getPath(), 'insert_at', function() {
        PolyArray(polygon.getPath());
        area = google.maps.geometry.spherical.computeArea(polygon.getPath());
        console.log("Area inside highlighted area: "   area   " meters squared");
        document.getElementById("myLog").innerHTML = "Area inside highlighted area: "   area   " meters squared";
        countMarkersInPolygon();
    });

    map.addListener("click", (event) => {
        addMarker(event.latLng);
    });
    document.getElementById("clear-markers").addEventListener("click", clearMarkers);
    document.getElementById("polygon-move").addEventListener("click", function(){
        polygon.setOptions({clickable: true});

    });
    document.getElementById("polygon-stay").addEventListener("click", function(){
        polygon.setOptions({clickable: false});

    });
}

function addMarker(position) {
    const marker = new google.maps.Marker({
        position,
        map,
    });
    markers.push(marker);
    countMarkersInPolygon();
}

function setMapOnAll(map) {
    for (let i = 0; i < markers.length; i  ) {
        markers[i].setMap(map);
    }
}

function clearMarkers() {
    setMapOnAll(null);
    markers = [];
    document.getElementById("markerCnt").innerHTML = "# of nodes inside highlighted area: 0";
}

function PolyArray (array) {
    vertices = [];

    for (var i = 0; i < array.getLength(); i  ) {
        vertices.push({
            lat: array.getAt(i).lat(),
            lng: array.getAt(i).lng()
        });
    }
    console.log(vertices);
}
function countMarkersInPolygon() {
  // count markers
  var markerCnt = 0;
  for (var i = 0; i < markers.length; i  ) {
    if (google.maps.geometry.poly.containsLocation(markers[i].getPosition(), polygon)) {
      markerCnt  ;
    }
  }
  document.getElementById("markerCnt").innerHTML = "# of nodes inside highlighted area: "   markerCnt;

} 
 html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}

#map {
height: 80%;
} 
 <!DOCTYPE html>
<html>

<head>
  <title>Map</title>
  <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
  <meta name="viewport" content="initial-scale=1.0">
  <meta charset="utf-8">
</head>

<body>

  <div class="container-fluid" style="height:100%">
    <div class="row">
      <div class="col">
        <h1 class="display-4">5G Map</h1>
      </div>
    </div>
    <div class="row" style="height:80%">
      <div class="col" style="height:100%">
        <div id="floating-panel" style="height:100%">
          <input id="clear-markers" type="button" value="Clear Markers On Map" />
          <div id="map"></div>
          <div id="floating-panel-2">
            <input id="polygon-move" type="button" value="Make Polygon Movable" />
            <input id="polygon-stay" type="button" value="Make Polygon Stationary to Add Markers" />
            <div id="myLog"></div>
            <div id="markerCnt"></div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <script src="script.js"></script>
  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qkamp;callback=createMapamp;libraries=geometry" async defer></script>
</body>

</html>
Метки: ,