노드를 클릭하여 나타나게하고 색상을 변경하려면 어떻게합니까?

Question

첫 번째 노드를 클릭 한 후 하나의 노드를 추가해야하는 프로젝트가 있습니다. 그런 다음 첫 번째를 클릭 한 후에 노드 색상을 변경해야만 사용자가 이미 해당 노드를 클릭했음을 알 수 있습니다. 이것이 가능한가? Google지도 API로 작업 한 것은 이번이 처음입니다.

function initialize() { 

    var markers = new Array(); 

    var mapOptions = { 
     zoom: 12, 
     center: new google.maps.LatLng(44.973699, -93.113952) 
    }; 

    var locations = [ 
     [new google.maps.LatLng(44.970784, -93.191887), 'Jurassic World', '<iframe width="260" height="165" src="https://www.youtube.com/embed/22mzL2rWu30" frameborder="0" gesture="media" allow="encrypted-media" allowfullscreen></iframe>'], 
     [new google.maps.LatLng(44.956817, -93.130260), 'JUMANJI 2', '<iframe width="260" height="165" src="https://www.youtube.com/embed/HEVD3j_sYzw" frameborder="0" gesture="media" allow="encrypted-media" allowfullscreen></iframe>'] 
    ]; 

    var map = new google.maps.Map(document.getElementById('map'), mapOptions); 
    var infowindow = new google.maps.InfoWindow(); 

    for (var i = 0; i < locations.length; i++) { 
     var marker = new google.maps.Marker({ 
      icon: { 
     path: google.maps.SymbolPath.BACKWARD_CLOSED_ARROW, 
     strokeColor: "blue", 
     scale: 3}, 
      position: (44.970784, -93.191887), 
      map: map, 

     }); 
     google.maps.event.addListener(marker, 'click', (function (marker, i) { 

      return function() { 
       infowindow.setContent(locations[i][2]); 
       infowindow.open(map, marker); 
      } 

     })(marker, i)); 

    } 




} 

Answer 1

변경 "클릭"이벤트 리스너의 아이콘 색상 :

google.maps.event.addListener(marker, 'click', (function(marker, i) { 
    return function() { 
    this.setIcon({ 
     path: google.maps.SymbolPath.BACKWARD_CLOSED_ARROW, 
     strokeColor: "red", 
     scale: 3 
    }); 
    infowindow.setContent(locations[i][2]); 
    infowindow.open(map, marker); 
    } 

})(marker, i)); 

proof of concept fiddle

코드 :

function initialize() { 
 
    var markers = new Array(); 
 
    var mapOptions = { 
 
    zoom: 12, 
 
    center: new google.maps.LatLng(44.973699, -93.113952) 
 
    }; 
 

 
    var locations = [ 
 
    [new google.maps.LatLng(44.970784, -93.191887), 'Jurassic World', '<iframe width="260" height="165" src="https://www.youtube.com/embed/22mzL2rWu30" frameborder="0" gesture="media" allow="encrypted-media" allowfullscreen></iframe>'], 
 
    [new google.maps.LatLng(44.956817, -93.130260), 'JUMANJI 2', '<iframe width="260" height="165" src="https://www.youtube.com/embed/HEVD3j_sYzw" frameborder="0" gesture="media" allow="encrypted-media" allowfullscreen></iframe>'] 
 
    ]; 
 

 
    var map = new google.maps.Map(document.getElementById('map'), mapOptions); 
 
    var infowindow = new google.maps.InfoWindow(); 
 

 
    for (var i = 0; i < locations.length; i++) { 
 
    var marker = new google.maps.Marker({ 
 
     icon: { 
 
     path: google.maps.SymbolPath.BACKWARD_CLOSED_ARROW, 
 
     strokeColor: "blue", 
 
     scale: 3 
 
     }, 
 
     position: locations[i][0], // (44.970784, -93.191887), 
 
     map: map, 
 
    }); 
 
    google.maps.event.addListener(marker, 'click', (function(marker, i) { 
 
     return function() { 
 
     this.setIcon({ 
 
      path: google.maps.SymbolPath.BACKWARD_CLOSED_ARROW, 
 
      strokeColor: "red", 
 
      scale: 3 
 
     }); 
 
     infowindow.setContent(locations[i][2]); 
 
     infowindow.open(map, marker); 
 
     } 
 

 
    })(marker, i)); 
 
    } 
 
} 
 
google.maps.event.addDomListener(window, "load", initialize);

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

<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<div id="map"></div>

Answer 2

자신을 토글 기능으로 만들어 클릭으로 전달하십시오.

var toggleColor = (function(){ 
     var currentColor = "white"; 

     return function(){ 
      currentColor = currentColor == "white" ? "magenta" : "white"; 
      d3.select(this).style("fill", currentColor); 
     } 
    })();