Wie mache ich Knoten onclick und ändere auch die Farbe?

Question

Ich habe ein Projekt, wo ich einen Knoten hinzufügen muss, nachdem der erste angeklickt wurde. Nach dem Klicken auf die erste Schaltfläche muss die Farbe des Knotens geändert werden, damit der Benutzer weiß, dass er bereits auf diesen Knoten geklickt hat. Ist das möglich? Dies ist das erste Mal, dass ich mit Google Map API arbeite.

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

Ändern Sie die Symbolfarbe in der "Klick" Ereignis-Listener:

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

Code-Schnipsel:

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

Machen Sie sich eine Toggle-Funktion und übergeben Sie sie in den Klick.

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

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