2014-12-02 3 views
0

단일 KML 레이어가있는지도를 개발 중입니다. 하지만 일단 웹 사이트에 삽입되면 사용자가 KML을 켜고 끌 수 있어야합니다. 이 질문에 대한 제안 된 코드를 사용하여이 작업을 수행하려고 시도했지만 운이 좋지 않습니다. 나는이 문제에 대한 해결책을 찾는데 도움이되는 사람의 도움에 정말 감사 할 것입니다.Google지도 api에서 토글 kml

여기 내 코드입니다.

<html> 
 

 
<head> 
 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
 
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
 
    <script type="text/javascript"> 
 
    var geocoder = new google.maps.Geocoder(); 
 

 
    function geocodePosition(pos) { 
 
     geocoder.geocode({ 
 
     latLng: pos 
 
     }, function(responses) { 
 
     if (responses && responses.length > 0) { 
 
      updateMarkerAddress(responses[0].formatted_address); 
 
     } else { 
 
      updateMarkerAddress('Cannot determine address at this location.'); 
 
     } 
 
     }); 
 
    } 
 

 
    function updateMarkerStatus(str) { 
 
     document.getElementById('markerStatus').innerHTML = str; 
 
    } 
 

 
    function updateMarkerPosition(latLng) { 
 
     document.getElementById('info').innerHTML = [ 
 
     latLng.lat(), 
 
     latLng.lng() 
 
     ].join(', '); 
 
    } 
 

 
    function updateMarkerAddress(str) { 
 
     document.getElementById('address').innerHTML = str; 
 
    } 
 

 
    function initialize() { 
 
     var latLng = new google.maps.LatLng(-23.742023, 29.462218); 
 
     var markerPosition = new google.maps.LatLng(-23.460136, 31.3189074); 
 
     var map = new google.maps.Map(document.getElementById('mapCanvas'), { 
 
     zoom: 7, 
 
     center: latLng, 
 
     mapTypeId: google.maps.MapTypeId.TERRAIN 
 
     }); 
 
     var marker = new google.maps.Marker({ 
 
     position: markerPosition, 
 
     title: 'Point A', 
 
     map: map, 
 
     draggable: true 
 
     }); 
 

 
     // Update current position info. 
 
     updateMarkerPosition(latLng); 
 
     geocodePosition(latLng); 
 

 
     // Add dragging event listeners. 
 
     google.maps.event.addListener(marker, 'dragstart', function() { 
 
     updateMarkerAddress('DRAGGING...'); 
 
     }); 
 

 
     google.maps.event.addListener(marker, 'drag', function() { 
 
     updateMarkerStatus('DRAGGING...'); 
 
     updateMarkerPosition(marker.getPosition()); 
 
     }); 
 

 
     google.maps.event.addListener(marker, 'dragend', function() { 
 
     updateMarkerStatus('DRAG & DROP THE MARKER ONTO YOUR DESIRED PROPERTY'); 
 
     geocodePosition(marker.getPosition()); 
 
     }); 
 

 
     var kmlLayer = new google.maps.KmlLayer(); 
 

 
     var kmlUrl = 'https://dl.dropboxusercontent.com/u/29079095/Limpopo_Hunting_Zones/Zones_2015.kml'; 
 
     var kmlOptions = { 
 
     suppressInfoWindows: false, 
 
     preserveViewport: true, 
 
     map: map 
 
     }; 
 
     var kmlLayer = new google.maps.KmlLayer(kmlUrl, kmlOptions); 
 
    } 
 

 
    // Onload handler to fire off the app. 
 
    google.maps.event.addDomListener(window, 'load', initialize); 
 
    </script> 
 
</head> 
 

 
<body> 
 
    <style> 
 
    #mapCanvas { 
 
     width: 1000px; 
 
     height: 500px; 
 
     float: top; 
 
    } 
 
    #infoPanel { 
 
     float: top; 
 
     margin-left: 10px; 
 
    } 
 
    #infoPanel div { 
 
     margin-bottom: 5px; 
 
    } 
 
    </style> 
 

 
    <div id="mapCanvas"></div> 
 
    <div id="infoPanel"> 
 
    <b>MARKER STATUS:</b> 
 
    <div id="markerStatus"><i>DRAG & DROP THE MARKER ONTO YOUR DESIRED PROPERTY.</i> 
 
    </div> 
 
    <b>GPS CO-ORDINATES:</b> 
 
    <div id="info"></div> 
 
    </div> 
 
</body> 
 

 
</html>

+0

은 어떻게 KML을 전환을 기대하고있다? 체크 박스 나 버튼 (또는 해당 기능을 활성화 할 수있는 코드)을 수행 할 수있는 확인란이 표시되지 않습니다. "나는이 문제를 만들기 위해 다른 질문에서 제안한 코드를 사용하려고 시도했다"는 의미는 무엇입니까? 나는 그 어떤 시도도 보지 못한다. – geocodezip

+0

제안 된 코드를 모두 삭제했기 때문에 맵이 작동하지 않습니다. 그래서 내가 게시 할 수있는 게시 된 코드. 나는 현재 여기에 제시된 코드 반복 (http://stackoverflow.com/questions/17409598/toggle-multiple-kml-kml-layers-in-google-maps-api-v3)을 사용하려고 노력하고 있지만, 작동 안함. 나는 이것에 아주 새롭다. – Ross

+0

작동시키려는 코드를 게시 해주십시오. 내가 링크 된 질문은 나를 위해 작동합니다 (일단 제거 된 KML을 수정했습니다). – geocodezip

답변

0

당신은 지구로지도가 필요합니다 : 당신은 내가 또한 이동할 때,지도의 하단에 GPS 좌표를 변경하는 드래그 마커를 가지고 있음을 알 수 있습니다 클릭 리스너가 실행하는 함수 안에서 사용하는 방법. this question에 대한 대답의 기반 코드 작업을

:

<html> 
 

 
<head> 
 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
 
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
 
    <script type="text/javascript"> 
 
    var map = null; 
 
    var geocoder = new google.maps.Geocoder(); 
 
    var layers=[]; 
 
    layers[0] = new google.maps.KmlLayer("https://dl.dropboxusercontent.com/u/29079095/Limpopo_Hunting_Zones/Zones_2015.kml", 
 
{preserveViewport: true}); 
 

 
    function toggleLayers(i) 
 
    { 
 
     if(layers[i].getMap()==null){ 
 
      layers[i].setMap(map); 
 
     } 
 
     else { 
 
      layers[i].setMap(null); 
 
     } 
 
    } 
 

 
    function geocodePosition(pos) { 
 
     geocoder.geocode({ 
 
     latLng: pos 
 
     }, function(responses) { 
 
     if (responses && responses.length > 0) { 
 
      updateMarkerAddress(responses[0].formatted_address); 
 
     } else { 
 
      updateMarkerAddress('Cannot determine address at this location.'); 
 
     } 
 
     }); 
 
    } 
 

 
    function updateMarkerStatus(str) { 
 
     document.getElementById('markerStatus').innerHTML = str; 
 
    } 
 

 
    function updateMarkerPosition(latLng) { 
 
     document.getElementById('info').innerHTML = [ 
 
     latLng.lat(), 
 
     latLng.lng() 
 
     ].join(', '); 
 
    } 
 

 
    function updateMarkerAddress(str) { 
 
     document.getElementById('address').innerHTML = str; 
 
    } 
 

 
    function initialize() { 
 
     var latLng = new google.maps.LatLng(-23.742023, 29.462218); 
 
     var markerPosition = new google.maps.LatLng(-23.460136, 31.3189074); 
 
     map = new google.maps.Map(document.getElementById('mapCanvas'), { 
 
     zoom: 7, 
 
     center: latLng, 
 
     mapTypeId: google.maps.MapTypeId.TERRAIN 
 
     }); 
 
     var marker = new google.maps.Marker({ 
 
     position: markerPosition, 
 
     title: 'Point A', 
 
     map: map, 
 
     draggable: true 
 
     }); 
 

 
     // Update current position info. 
 
     updateMarkerPosition(latLng); 
 
     geocodePosition(latLng); 
 

 
     // Add dragging event listeners. 
 
     google.maps.event.addListener(marker, 'dragstart', function() { 
 
     updateMarkerAddress('DRAGGING...'); 
 
     }); 
 

 
     google.maps.event.addListener(marker, 'drag', function() { 
 
     updateMarkerStatus('DRAGGING...'); 
 
     updateMarkerPosition(marker.getPosition()); 
 
     }); 
 

 
     google.maps.event.addListener(marker, 'dragend', function() { 
 
     updateMarkerStatus('DRAG & DROP THE MARKER ONTO YOUR DESIRED PROPERTY'); 
 
     geocodePosition(marker.getPosition()); 
 
     }); 
 
/* 
 
     var kmlUrl = 'https://dl.dropboxusercontent.com/u/29079095/Limpopo_Hunting_Zones/Zones_2015.kml'; 
 
     var kmlOptions = { 
 
     suppressInfoWindows: false, 
 
     preserveViewport: true, 
 
     map: map 
 
     }; 
 
     var kmlLayer = new google.maps.KmlLayer(kmlUrl, kmlOptions); 
 
*/ 
 
    } 
 

 
    // Onload handler to fire off the app. 
 
    google.maps.event.addDomListener(window, 'load', initialize); 
 
    </script> 
 
    <style> 
 
    #mapCanvas { 
 
     width: 1000px; 
 
     height: 500px; 
 
     float: top; 
 
    } 
 
    #infoPanel { 
 
     float: top; 
 
     margin-left: 10px; 
 
    } 
 
    #infoPanel div { 
 
     margin-bottom: 5px; 
 
    } 
 
    </style> 
 
</head> 
 
<body> 
 
Layer1 <input type="checkbox" id="layer_01" onclick="toggleLayers(0);"/> 
 
    <div id="mapCanvas"></div> 
 
    <div id="infoPanel"> 
 
    <div id="address"></div> 
 
    <b>MARKER STATUS:</b> 
 
    <div id="markerStatus"><i>DRAG & DROP THE MARKER ONTO YOUR DESIRED PROPERTY.</i> 
 
    </div> 
 
    <b>GPS CO-ORDINATES:</b> 
 
    <div id="info"></div> 
 
    </div> 
 
</body> 
 

 
</html>

+0

정말 고마워요, 이제 작동하는 것 같아요! 나는 몇몇 영역에서 내가 잘못 가고 있다고 생각한다. 처음에는 KML을 잘못 정의했습니다. 다시 한 번 감사드립니다. 정말 감사드립니다. – Ross