微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦！

Google Maps API：如何计算放置在已制作多边形中的标记数量？

分类：编程问答

如何解决Google Maps API：如何计算放置在已制作多边形中的标记数量？

所以我目前正在尝试通过循环标记数组并使用 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,];

    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=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=createMap&libraries=geometry" async defer></script>
</body>
</html>

解决方法

  1. 对于发布的示例，将多边形设为全局。
  2. 将标记计数的代码变成一个函数，在发生可能改变标记计数的事情时调用它（添加标记、编辑多边形路径等）。
  3. 移除标记时清除显示的标记计数。

screenshot of resulting map

工作代码片段：

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,];

    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=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=createMap&libraries=geometry" async defer></script>
</body>

</html>

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

苹果市值2025年有望达4万亿美元
pythonJavaScriptjavaHTMLPHPreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-boot