2014-12-02 4 views
0

Я разрабатываю карту с одним слоем KML. Но как только он встроен на веб-сайт, мне нужно, чтобы пользователь мог включать и выключать KML. Я попытался использовать предложенный код из других вопросов, чтобы сделать эту работу, но мне не повезло. Я бы очень признателен за любую помощь в поиске решения этого.toggle kml в google maps api

Вот мой код. Вы заметите, что у меня тоже есть перемещаемой маркер, который, когда он перемещается, изменяющей GPS координаты в нижней части карты:

<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

Вам нужна карта должна быть глобальной использовать его внутри функций, запускаемых кликами.

Рабочий фрагмент кода, на основе ответа на 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

Смежные вопросы