Google지도의 위도/경도로 마커 제거

Question

Google지도에 마커 세트가 있습니다. 그리고 내지도의 오른쪽에는지도에 표시된 장소 목록이 있습니다. 이제 장소를 클릭하면 핀/마커의 색상이 변경됩니다. 이를 위해 위도와 경도가있는 표식을 삭제하고 (장소 링크를 클릭하면 표시됩니다) 새 이미지로 새 표식을 배치 할 것입니다. 하지만 위도와 경도 또는 장소별로 마커를 삭제하는 방법을 모릅니다. 도와주세요.

<script type='text/javascript'> 
$(document).ready(function() { 
    var map = null; 
    var infowindow = new google.maps.InfoWindow(); 
    function createMarker(place) { 

     var marker = new google.maps.Marker({ 
      map: map 
     }); 

     var address = place.formatted_address; 



     marker.setPosition(place.geometry.location); 
     marker.setTitle(address); 
     marker.setVisible(true); 
     address = address + '<a href="#" class="link" title="Been there" alt="' + address + '">B</a>&nbsp;<a class="link" href="#" title="Want to go" alt="' + address + '">W</a>&nbsp;<a class="link" href="#" alt="' + address + '" title="Favourite">F</a>'; 
     $('#trip_location').append(address); 
     google.maps.event.addListener(marker, 'click', function(e) { 
      infowindow.setContent('<div><strong>' + marker.title + '</strong><br>'); 
      infowindow.open(map, marker); 
     }); 
     google.maps.event.trigger(marker, 'click'); 
    } 



    function initialize() { 
     var mapOptions = { 
      center: new google.maps.LatLng(-33.8688, 151.2195), 
      zoom: 13, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     }; 
     map = new google.maps.Map(document.getElementById('map_canvas'), 
       mapOptions); 
     var input = /** @type {HTMLInputElement} */(document.getElementById('searchTextField')); 

     var autocomplete = new google.maps.places.Autocomplete(input); 
     autocomplete.bindTo('bounds', map); 
     google.maps.event.addListener(autocomplete, 'place_changed', function() { 
      infowindow.close(); 
      input.className = ''; 
      var place = autocomplete.getPlace(); 
      if (!place.geometry) { 
       // Inform the user that the place was not found and return. 
       input.className = 'notfound'; 
       return; 
      } 
      var location = place.geometry.location; 
      var address = place.formatted_address; 
      createMarker(place); 
     }); 
    } 

    $('#trip_location').on('click', '.link', function(e) { 

     e.preventDefault(); 
     var location = $(this).attr('alt'); 
    }); 


    $('.clear').click(function() { 
     $('#searchTextField').val(''); 
    }); 
    google.maps.event.addDomListener(window, 'load', initialize); 
}); 

나는 구글의 자동 완성을 통해 구글 맵에 여러 개의 마커를 추가 할 예정입니다. 마커의 위치가 페이지의 오른쪽에 나열됩니다. 사용자가 장소를 클릭하면 마커 아이콘이 바뀝니다.

Answer 1

삭제 및 바꾸기 대신 장소와 관련된 각 마커에 대한 참조를 유지하고 새 설정을 전달하는 setIcon으로 전화하면됩니다. 문서 참조 : https://developers.google.com/maps/documentation/javascript/reference#Marker

편집 : 새 코드입니다.

마커를 포함하는 마커 배열, 마커 ID를 유지하는 데 사용 된 데이터 속성, 링크 요소 클릭 이벤트 발생시 마커 ID 속성 값 가져 오기가 추가되었습니다.

참고 : 테스트를 거치지 않았으므로 버그 일 수 있습니다.

$(document).ready(function() { 
    var map = null; 
    var markers = []; 
    var infowindow = new google.maps.InfoWindow(); 
    function createMarker(place) { 

     var marker = new google.maps.Marker({ 
      map: map 
     }); 

     var address = place.formatted_address; 



     marker.setPosition(place.geometry.location); 
     marker.setTitle(address); 
     marker.setVisible(true); 

     markers.push(marker); 
     address = address + '<a href="#" class="link" title="Been there" alt="' + address + '" data-markerid='" + (markers.length - 1) + "'>B</a>&nbsp;<a class="link" href="#" title="Want to go" alt="' + address + '">W</a>&nbsp;<a class="link" href="#" alt="' + address + '" title="Favourite" data-markerid='" + (markers.length - 1) + "'>F</a>'; 


     $('#trip_location').append(address); 
     google.maps.event.addListener(marker, 'click', function(e) { 
      infowindow.setContent('<div><strong>' + marker.title + '</strong><br>'); 
      infowindow.open(map, marker); 
     }); 
     google.maps.event.trigger(marker, 'click'); 
    } 



    function initialize() { 
     var mapOptions = { 
      center: new google.maps.LatLng(-33.8688, 151.2195), 
      zoom: 13, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     }; 
     map = new google.maps.Map(document.getElementById('map_canvas'), 
       mapOptions); 
     var input = /** @type {HTMLInputElement} */(document.getElementById('searchTextField')); 

     var autocomplete = new google.maps.places.Autocomplete(input); 
     autocomplete.bindTo('bounds', map); 
     google.maps.event.addListener(autocomplete, 'place_changed', function() { 
      infowindow.close(); 
      input.className = ''; 
      var place = autocomplete.getPlace(); 
      if (!place.geometry) { 
       // Inform the user that the place was not found and return. 
       input.className = 'notfound'; 
       return; 
      } 
      var location = place.geometry.location; 
      var address = place.formatted_address; 
      createMarker(place); 
     }); 
    } 

    $('#trip_location').on('click', '.link', function(e) { 

     e.preventDefault(); 
     var location = $(this).attr('alt'); 
     var markerid = $(this).data('markerid'); 
     var marker = markers[markerid]; 
    }); 


    $('.clear').click(function() { 
     $('#searchTextField').val(''); 
    }); 
    google.maps.event.addDomListener(window, 'load', initialize); 
});