chhiew Ответов: 0

Карта Google с маркером кластера - добавить кнопку-переключатель (КМЛ) не работает

У меня есть базовая карта, использующая функцию маркерного кластера, и я хотел бы добавить еще одну карту с переключателями (слой KML).

После нескольких часов попыток и изменения кода здесь и там все еще не удается заставить его работать. т. е. базовая карта работает, кнопка переключения слоя при нажатии не работает.

Я приложил ниже свои коды, очень сожалею о беспорядке форматирования, так как я изучаю коды и пробовал много проб и ошибок.

Мою проектную работу можно найти по этому адресу: https://360.yo.fr/mapcluster/koh

Может ли кто-нибудь просветить меня, что пошло не так с моим кодом?

Огромное спасибо.

Что я уже пробовал:

<pre>//----------------google.maps.event.addDomListener(window, 'load', speedTest.init);
  var map = null;
var geocoder = new google.maps.Geocoder();

var layers=[];
layers[0] = new  google.maps.KmlLayer("https://www.google.com/maps/d/kml?mid=11L4VsN2gl3JG5ORhce3-L1-M5QkZWIGR", {preserveViewport: true});layers[1] = new  google.maps.KmlLayer("https://www.google.com/maps/d/kml?mid=1EafZzDb4pL4J52bnrjjOjMOVmwDSPn9u", {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;
}


  //----------------------------var map;function initialize() {
  var latLng = new google.maps.LatLng(1.525420, 103.712070);
  var markerPosition = new google.maps.LatLng(1.525420, 103.712070);
 var image = 'https://360.yo.fr/mapcluster/images/marker1.png'; //custom marker path

  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 12,
    center: latLng,
    icon: image,
    mapTypeId: google.maps.MapTypeId.TERRAIN
  });
 var marker = new google.maps.Marker({
    position: markerPosition,
    title: 'Point A',
    map: map,
    icon: image,// customer marker
    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());
  }); //  google.maps.event.addDomListener(window, 'load', initialize);
 google.maps.event.addDomListener(window, 'load', speedTest.init);

0 Ответов