在地图 API 上将过滤后的标记显示为折线

Question

我正在尝试让我的地图在不同的标记之间绘制折线。这个想法是有六组标记； Alpha、Bravo、Charlie、Delta、Echo、Foxtrot。

坐标存储在数据库中，由 php 文档读取，该文档将标记放入 XML 文件中。

我的 XML 输出数据如下所示：

    <markers>
<marker type="Hint" deelgebied="Echo" dag="zaterdag" tijd="10:30" lat="51.980434" lng="5.653239"/>
<marker type="Hint" deelgebied="Delta" dag="zaterdag" tijd="10:30" lat="51.872005" lng="5.429794"/>
<marker type="Hint" deelgebied="Charlie" dag="zaterdag" tijd="10:30" lat="51.850761" lng="5.959484"/>
<marker type="Hint" deelgebied="Charlie" dag="zaterdag" tijd="19:20" lat="51.852547" lng="5.962409"/>
<marker type="Hint" deelgebied="Bravo" dag="zaterdag" tijd="10:30" lat="51.935303" lng="6.285142"/>
<marker type="Hint" deelgebied="Alpha" dag="zaterdag" tijd="10:30" lat="52.091156" lng="5.983163"/>
<marker type="Hint" deelgebied="Foxtrot" dag="zaterdag" tijd="10:30" lat="52.142597" lng="5.700851"/>
<marker type="Hunt" deelgebied="Echo" dag="zaterdag" tijd="19:32" lat="51.978531" lng="5.770242"/>
<marker type="Hint" deelgebied="Foxtrot" dag="zondag" tijd="19:00" lat="52.144386" lng="5.703785"/>
<marker type="Hint" deelgebied="Echo" dag="zondag" tijd="19:00" lat="51.982224" lng="5.656161"/>
<marker type="Hint" deelgebied="Delta" dag="zondag" tijd="19:00" lat="51.873802" lng="5.432700"/>
<marker type="Hint" deelgebied="Charlie" dag="zondag" tijd="19:00" lat="51.853436" lng="0.000000"/>
<marker type="Hint" deelgebied="Bravo" dag="zondag" tijd="19:00" lat="51.937077" lng="6.288086"/>
<marker type="Hint" deelgebied="Alpha" dag="zondag" tijd="19:00" lat="52.094730" lng="5.987297"/>
</markers>

如您所见，所有标记都有一个类型，即提示或狩猎。他们有一个“deelgebied”的价值。

这是负责显示地图和标记的代码。除了标记之外，还加载了另一个 KML 文件。

<script>
  var customMarker = {
    Groep: {
      icon: 'http://maps.google.com/mapfiles/ms/icons/red-dot.png'
    },
    Hunt: {
      icon: 'http://maps.google.com/mapfiles/ms/icons/green-dot.png'
    },
    Hint: {
      icon: 'http://maps.google.com/mapfiles/ms/icons/yellow-dot.png'
    }
  };

    function initMap() {
    var map = new google.maps.Map(document.getElementById('map'), {
      center: new google.maps.LatLng(<?php echo $mapslat; ?>, <?php echo $mapslng; ?>),
      zoom: <?php echo $mapszoom; ?>
    });
    var ctaLayer = new google.maps.KmlLayer({
      url: '<?php echo $kml; ?>',
      map: map
    });

    var infoWindow = new google.maps.InfoWindow;

      downloadUrl('modules/XMLmarkers.php', function(data) {
        var xml = data.responseXML;
        var markers = xml.documentElement.getElementsByTagName('marker');
        Array.prototype.forEach.call(markers, function(markerElem) {
          var type = markerElem.getAttribute('type');
          var deelgebied = markerElem.getAttribute('deelgebied');
          var dag = markerElem.getAttribute('dag');
          var tijd = markerElem.getAttribute('tijd');
          var point = new google.maps.LatLng(
              parseFloat(markerElem.getAttribute('lat')),
              parseFloat(markerElem.getAttribute('lng')));

          var infowincontent = document.createElement('div');
          var strong = document.createElement('strong');
          strong.textContent = type
          infowincontent.appendChild(strong);
          infowincontent.appendChild(document.createElement('br'));

          var content = dag + ' ' + tijd;
          var text = document.createElement('text');
          text.textContent = content
          infowincontent.appendChild(text);
          var icon = customMarker[type] || {};
          var marker = new google.maps.Marker({
            map: map,
            position: point,
            icon: icon.icon
          });
          marker.addListener('click', function() {
            infoWindow.setContent(infowincontent);
            infoWindow.open(map, marker);
          });
        });
        var path = [];
        for (var i = 0; i < markers.length; i++) {
            var lat = parseFloat(markers[i].getAttribute("lat"));
            var lng = parseFloat(markers[i].getAttribute("lng"));
            var point = new google.maps.LatLng(lat,lng);
            path.push(point);
        }//finish loop

        var polyline = new google.maps.Polyline({
            path: path,
            strokeColor: "#FF0000",
            strokeOpacity: 1.0,
            strokeWeight: 2
        });
        polyline.setMap(map);
      });
    }


  function downloadUrl(url, callback) {
    var request = window.ActiveXObject ?
        new ActiveXObject('Microsoft.XMLHTTP') :
        new XMLHttpRequest;

    request.onreadystatechange = function() {
      if (request.readyState == 4) {
        request.onreadystatechange = doNothing;
        callback(request, request.status);
      }
    };

    request.open('GET', url, true);
    request.send(null);
  }

  function doNothing() {}
</script>

现在，地图在所有标记之间画线，“deelgebied”值没有过滤。为此，我编写了以下代码来替换循环：

            for (var i = 0; i < markers.length; i++) {
            if (markers[i].deelgebied === "Alpha") {
                var lat = parseFloat(markers[i].getAttribute("lat"));
                var lng = parseFloat(markers[i].getAttribute("lng"));
                var point = new google.maps.LatLng(lat,lng);
                path.push(point);
            }

此代码将替换 var path [] 下面的代码。使用此代码，地图不再绘制任何线条。 *注意：出于测试目的，我刚刚编写了过滤 Alpha 标记的代码。

谢谢！

Answer 1

我想通了。

我首先在“deelgebied”的循环内声明了一个 var。 之后，我可以通过将变量与某个值进行比较来简化我的 if 语句。

var AlphaPath = [];
        for (var i = 0; i < markers.length; i++) {
            var markerdeelgebied = markers[i].getAttribute("deelgebied");
            if (markerdeelgebied == "Alpha") {
                var lat = parseFloat(markers[i].getAttribute("lat"));
                var lng = parseFloat(markers[i].getAttribute("lng"));
                var point = new google.maps.LatLng(lat,lng);
                AlphaPath.push(point);
            }
        }
        var AlphaPolyline = new google.maps.Polyline({
            path: AlphaPath,
            strokeColor: "#FF0000",
            strokeOpacity: 1.0,
            strokeWeight: 2
        });
        AlphaPolyline.setMap(map);