하나의 버튼으로 Google지도에 마커 배열 표시/숨기기 방법

Question

마커 표시/숨기기 버튼 하나만 만들려고합니다. 코드는 위치 배열에서 마커 배열을 만들고 처음에는지도에 표시합니다. 버튼을 클릭하여 마커를 숨기면 마커가 숨겨 지지만 다시 클릭하면 마커가 보이지 않습니다. 나는 초보자에 불과하지만 오랫동안이 일에 매달 렸습니다. 도와주세요.

var locations = [ 
 
\t ['1', 33.727190, -117.851863], 
 
\t ['2', 34.094715, -117.773466], 
 
\t ['3', 34.143758, -118.782985], 
 
\t ['4', 33.732112, -117.845280], 
 
\t ['5', 33.136157, -117.156101], 
 
\t ['6', 33.875900, -118.034982], 
 
\t ['7', 33.871597, -118.242668], 
 
\t ['8', 33.979397, -118.047032], 
 
\t ['9', 33.710725, -117.859015] 
 
    ]; 
 
    var locationsMarkers = []; 
 
    function initMap() { 
 
\t var map = new google.maps.Map(document.getElementById('map'), { 
 
\t \t center: {lat: 34.052234, lng: -118.243685}, 
 
\t \t zoom: 8 
 
\t }); 
 
\t setMapOnLocations(map) 
 
    } 
 
    function setLocations(locations) { 
 
\t for (var i = 0; i < locations.length; i++) { 
 
\t \t var marker = new google.maps.Marker({ 
 
\t \t \t position: new google.maps.LatLng(locations[i][1],locations[i][2]), 
 
\t \t \t map: map 
 
\t \t }); 
 
\t \t locationsMarkers.push(marker); 
 
\t } 
 
} 
 

 
function setMapOnLocations(map) { 
 
\t setLocations(locations); 
 
\t for (var i = 0; i < locationsMarkers.length; i++) { 
 
\t \t locationsMarkers[i].setMap(map); 
 
\t } 
 
} 
 

 
function clearLocations() { 
 
\t setMapOnLocations(null); 
 
} 
 

 
function showLocations() { 
 
\t setMapOnLocations(map); 
 
} 
 

 
$(document).ready(function(){ 
 
\t var x = false; 
 
\t $("#button").on('click', function(){ 
 
\t \t if (!x){ 
 
\t \t \t clearLocations() 
 
\t \t \t x = true; 
 
\t \t } 
 
\t \t else { 
 
\t \t \t showLocations() 
 
\t \t \t x = false; 
 
\t \t } 
 
\t }); 
 
});

Answer 1

당신은 당신이 setMapOnLocations(map)를 호출 효과적으로 동일 버튼을 클릭 showLocations() 두 번째 시간을 요구하고있다. map은 DOM 준비 함수의 클로저 또는 컨텍스트에서 정의되지 않으므로 모든 위치에서 맵을 undefined로 설정하는 것이 효과적입니다.

코드에서 map은 글로벌 변수가 아닙니다. 하나의 클로저에서만 정의되며 함수는 initMap입니다. 첫 번째 장소에 위치가 표시되는 이유는 해당 기능에서 setMapOnLocations으로 전달하지만 initMap이 완료되면 Google지도의 인스턴스가 손실됩니다.

Google지도를 전역 변수에 할당하고 showLocations에서 사용하는 경우 그 밖의 모든 것이 있어야합니다. 즉

,이 같은 일이 :

var googleMap; // make the google map instance have global scope 

var locations = [ 
    ['1', 33.727190, -117.851863], 
    ['2', 34.094715, -117.773466], 
    ['3', 34.143758, -118.782985], 
    ['4', 33.732112, -117.845280], 
    ['5', 33.136157, -117.156101], 
    ['6', 33.875900, -118.034982], 
    ['7', 33.871597, -118.242668], 
    ['8', 33.979397, -118.047032], 
    ['9', 33.710725, -117.859015] 
]; 

var locationsMarkers = []; 

function initMap() { 
    // assign the google map instance to the global variable 
    googleMap = new google.maps.Map(document.getElementById('map'), { 
    center: {lat: 34.052234, lng: -118.243685}, 
    zoom: 8 
    }); 
    setMapOnLocations(googleMap); 
} 

function setLocations(locations) { 
    for (var i = 0; i < locations.length; i++) { 
    var marker = new google.maps.Marker({ 
     position: new google.maps.LatLng(locations[i][1],locations[i][2]), 
     map: map // map is undefined here, so this is superfluous 
    }); 
    locationsMarkers.push(marker); 
    } 
} 

function setMapOnLocations(map) { 
    setLocations(locations); 
    for (var i = 0; i < locationsMarkers.length; i++) { 
    locationsMarkers[i].setMap(map); 
    } 
} 

function clearLocations() { 
    setMapOnLocations(null); 
} 

function showLocations() { 
    setMapOnLocations(googleMap); // use the global instance of the google map 
} 

$(document).ready(function(){ 
    var x = false; 
    $("#button").on('click', function(){ 
    if (!x){ 
     clearLocations() 
     x = true; 
    } 
    else { 
     showLocations() 
     x = false; 
    } 
    }); 
}); 

Answer 2

귀하의 map 변수는 initMap 기능 지역이다. HTML 클릭 리스너에서 사용하려면 전역 범위에 있어야합니다.

변경 :

function initMap() { 
    var map = new google.maps.Map(...) 

사람 :

var map; 
function initMap() { 
    map = new google.maps.Map(...) 

proof of concept fiddle

코드 :

var locations = [ 
 
    ['1', 33.727190, -117.851863], 
 
    ['2', 34.094715, -117.773466], 
 
    ['3', 34.143758, -118.782985], 
 
    ['4', 33.732112, -117.845280], 
 
    ['5', 33.136157, -117.156101], 
 
    ['6', 33.875900, -118.034982], 
 
    ['7', 33.871597, -118.242668], 
 
    ['8', 33.979397, -118.047032], 
 
    ['9', 33.710725, -117.859015] 
 
]; 
 
var map; 
 
var locationsMarkers = []; 
 

 
function initMap() { 
 
    map = new google.maps.Map(document.getElementById('map'), { 
 
    center: { 
 
     lat: 34.052234, 
 
     lng: -118.243685 
 
    }, 
 
    zoom: 8 
 
    }); 
 
    setMapOnLocations(map) 
 
} 
 

 
function setLocations(locations) { 
 
    for (var i = 0; i < locations.length; i++) { 
 
    var marker = new google.maps.Marker({ 
 
     position: new google.maps.LatLng(locations[i][1], locations[i][2]), 
 
     map: map 
 
    }); 
 
    locationsMarkers.push(marker); 
 
    } 
 
} 
 

 
function setMapOnLocations(map) { 
 
    setLocations(locations); 
 
    for (var i = 0; i < locationsMarkers.length; i++) { 
 
    locationsMarkers[i].setMap(map); 
 
    } 
 
} 
 

 
function clearLocations() { 
 
    setMapOnLocations(null); 
 
} 
 

 
function showLocations() { 
 
    setMapOnLocations(map); 
 
} 
 

 
$(document).ready(function() { 
 
    var x = false; 
 
    $("#button").on('click', function() { 
 
    if (!x) { 
 
     clearLocations() 
 
     x = true; 
 
    } else { 
 
     showLocations() 
 
     x = false; 
 
    } 
 
    }); 
 
}); 
 
google.maps.event.addDomListener(window, "load", initMap);

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

<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input id="button" type="button" value="toggle" /> 
 
<div id="map"></div>

,691 363,210