在地圖上顯示過濾的標記爲多段線API

-1

我試圖讓我的地圖在不同標記之間繪製多段線。這個想法是有六組標記; Alpha，Bravo，Charlie，Delta，Echo，Foxtrot。在地圖上顯示過濾的標記爲多段線API

座標存儲在數據庫中，該數據庫正在被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); 
      }

該代碼將取代略低於變種路[]的代碼。使用此代碼，地圖不再繪製任何線條。 *注意：出於測試目的，我剛剛編寫了代碼來過濾Alpha標記。

謝謝！

來源

2017-09-06 rikben

我想通了。

我首先在循環中爲「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);

來源

2017-09-14 07:11:56 rikben

在地圖上顯示過濾的標記爲多段線API

回答

相關問題