Можно только один раз переключать маркер в API карт Google v3

Я установил простой интерфейс Google Map с помощью Google Map API v3 и хочу реализовать функцию, которая может переключаться с маркеров, но она не работает должным образом. Я не могу включить его после выключения слоя.Можно только один раз переключать маркер в API карт Google v3

var request; 
var places; 
var map; 
var markers = []; 
var myLatLng = {lat: 34, lng: 38}; 

// load database and parse into entries 
if (window.XMLHttpRequest) { 
    request = new XMLHttpRequest(); 
} else { 
    request = new ActiveXObject("Microsoft.XMLHTTP"); 
} 
request.open('GET', 'places.json'); 
request.onreadystatechange = function() { 
    if ((request.readyState ===4) && (request.status===200)) { 
     places = JSON.parse(request.responseText); 
     initMap(); 
     console.log(places); 
    } 
} 
request.send(); 

function initMap() { 
    // map options 
    var mapOptions = { 
     zoom: 6, 
     center: myLatLng, 
     mapTypeControl: true, 
     mapTypeId: google.maps.MapTypeId.HYBRID 
    }; 
    // initialise the map 
    var map = new google.maps.Map(document.getElementById('map'), mapOptions); 
    // add markers 
    for (var i = 0; i < places.length; i++) { 
     // the place 
     var place = places[i]; 
     // place co-ordinates 
     var latlng = new google.maps.LatLng(place.latitude, place.longitude); 
     var marker = new google.maps.Marker({ 
      position: latlng, 
      map: map, 
      title: place.city 
     }); 
     markers.push(marker); 
     var infowindow = new google.maps.InfoWindow; 
     google.maps.event.addListener(marker, 'click', (function(marker){ 
      return function() { 
       infowindow.open(map,marker); 
      }; 
     })(marker)); 
    } 
} 

function toggleMarkers() { 
    for (var i = 0; i < markers.length; i++) { 
     if (markers[i].getMap() === null) { 
      markers[i].setMap(map); 
     } else { 
      console.log(markers[0].setMap()) 
      markers[i].setMap(null); 
     } 
    } 
}

Функция ToggleMarkers вызывается в HTML.

<!DOCTYPE html> 
<head> 
    <!-- scripts --> 
    <script src="script2.js"></script> 
    <script src="https://maps.googleapis.com/maps/api/js?v=3&sensor=false&key="API Key"&callback=initMap"></script> 
</head> 
<body> 
    <div id="panel"> 
     <button onclick="toggleMarkers()">Toggle Markers</button> 
    </div> 
    <div id="map"></div> 
</body> 
</html>

источник

2015-11-21 Victor

Где вы добавляете маркеры в массив 'markers'? – geocodezip

В размещенном коде есть ошибки javascript ('Uncaught ReferenceError: content not defined'). Просьба представить [Минимальный, полный, проверенный и читаемый пример] (http://stackoverflow.com/help/mcve), который демонстрирует проблему. – geocodezip

@geocodezip, извините за свои ошибки, я просто обновил файл, но он работает только один раз. – Victor

Ваш map переменная является локальной для вашей initMap функции.

Изменить это:

function initMap() { 
    // map options 
    var mapOptions = { 
     zoom: 6, 
     center: myLatLng, 
     mapTypeControl: true, 
     mapTypeId: google.maps.MapTypeId.HYBRID 
    }; 
    // initialise the map 
    var map = new google.maps.Map(document.getElementById('map'), mapOptions);

To:

function initMap() { 
    // map options 
    var mapOptions = { 
     zoom: 6, 
     center: myLatLng, 
     mapTypeControl: true, 
     mapTypeId: google.maps.MapTypeId.HYBRID 
    }; 
    // initialise the global map variable 
    map = new google.maps.Map(document.getElementById('map'), mapOptions);

proof of concept fiddle

фрагмент кода:

var request; 
 
var places; 
 
var map; 
 
var markers = []; 
 
var myLatLng = { 
 
    lat: 34, 
 
    lng: 38 
 
}; 
 

 
function initMap() { 
 
    var mapOptions = { 
 
    zoom: 6, 
 
    center: myLatLng, 
 
    mapTypeControl: true, 
 
    mapTypeId: google.maps.MapTypeId.HYBRID 
 
    }; 
 
    // initialise the map 
 
    map = new google.maps.Map(document.getElementById('map'), mapOptions); 
 
    // add markers 
 
    for (var i = 0; i < places.length; i++) { 
 
    // the place 
 
    var place = places[i]; 
 
    // place co-ordinates 
 
    var latlng = new google.maps.LatLng(place.latitude, place.longitude); 
 
    var marker = new google.maps.Marker({ 
 
     position: latlng, 
 
     map: map, 
 
     title: place.city 
 
    }); 
 
    var infowindow = new google.maps.InfoWindow(); 
 
    var content = place.city + "<br>" + latlng.toUrlValue(6); 
 
    google.maps.event.addListener(marker, 'click', (function(marker, content) { 
 
     return function() { 
 
     infowindow.setContent(content); 
 
     infowindow.open(map, marker); 
 
     }; 
 
    })(marker, content)); 
 
    markers.push(marker); 
 
    } 
 
} 
 

 
function toggleMarkers() { 
 
    for (var i = 0; i < markers.length; i++) { 
 
    if (markers[i].getMap() === null) { 
 
     markers[i].setMap(map); 
 
    } else { 
 
     markers[i].setMap(null); 
 
    } 
 
    } 
 
} 
 
google.maps.event.addDomListener(window, "load", initMap); 
 
// load database and parse into entries 
 
// store all entires as in var "places" 
 
var places = [{ 
 
    city: "Lebanon", 
 
    latitude: 33.854721, 
 
    longitude: 35.862285 
 
}, { 
 
    city: "Damascus, Syria", 
 
    latitude: 33.5138073, 
 
    longitude: 36.2765279 
 
}, { 
 
    city: "Amman, Jordan", 
 
    latitude: 31.9565783, 
 
    longitude: 35.9456951 
 
}];

html, 
 
body, 
 
#map { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
}

<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<div id="panel"> 
 
    <button onclick="toggleMarkers()">Toggle Markers</button> 
 
</div> 
 
<div id="map"></div>

источник

2015-11-21 22:02:58 geocodezip

Можно только один раз переключать маркер в API карт Google v3

ответ

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