-1
다른 마커간에 폴리선을 그리려면 내지도를 얻으려고합니다. 아이디어는 6 개의 마커 그룹이 있다는 것입니다. 알파, 브라보, 찰리, 델타, 에코, 폭스 트롯필터링 된 마커를지도에 폴리 라인으로 표시 API
좌표는 XML 문서에 마커를 넣는 PHP 문서로 읽혀지는 데이터베이스에 저장됩니다.
내 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>
지금지도는 모든 마커 사이에 선을 그으므로 '폐기 된'값에는 필터링이 없습니다. 이 코드는 바로 [] VAR 경로 아래의 코드를 대체 할
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 마커를 필터링하는 코드를 작성했습니다.
감사합니다!