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>

如您所见，所有标记都有一个类型，即提示或搜索。而且，他们已经获得了一个很有价值的价值。

这是负责显示地图和标记的代码。除了标记之外，还会加载另一个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＆＃39;中没有过滤。值。为此，我编写了以下代码来替换循环：

            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

我明白了。

我首先在循环中为＆＃34; deelgebied＆＃34;声明了一个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);

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

1 个答案: