如何將之前點擊的標記顏色更改爲其原始顏色

當我點擊該標記，我將其設置爲不同的顏色（藍色）

這樣

 this.setIcon("http://maps.google.com/mapfiles/ms/icons/blue-dot.png");

這是我的全部代碼

var map; 
var global_markers = [];  
var markers = [[37.09024, -95.712891, 'trialhead0'], [-14.235004, -51.92528, 'trialhead1'], [-38.416097, -63.616672, 'trialhead2']]; 

var infowindow = new google.maps.InfoWindow({}); 

function initialize() { 
    geocoder = new google.maps.Geocoder(); 
    var latlng = new google.maps.LatLng(40.77627, -73.910965); 
    var myOptions = { 
     zoom: 1, 
     center: latlng, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    } 
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
    addMarker(); 
} 

function addMarker() { 
    for (var i = 0; i < markers.length; i++) { 
     // obtain the attribues of each marker 
     var lat = parseFloat(markers[i][0]); 
     var lng = parseFloat(markers[i][1]); 
     var trailhead_name = markers[i][2]; 

     var myLatlng = new google.maps.LatLng(lat, lng); 

     var contentString = "<html><body><div><p><h2>" + trailhead_name + "</h2></p></div></body></html>"; 

     var marker = new google.maps.Marker({ 
      position: myLatlng, 
      map: map, 
      title: "Trailhead name: " + trailhead_name 
     }); 

     marker['infowindow'] = contentString; 

     global_markers[i] = marker; 

     google.maps.event.addListener(global_markers[i], 'click', function() { 
      this.setIcon("http://maps.google.com/mapfiles/ms/icons/blue-dot.png"); 
      infowindow.setContent(this['infowindow']); 
      infowindow.open(map, this); 
     }); 
    } 
} 

window.onload = initialize;

http://jsfiddle.net/ZLuTg/1008/

我的問題是，當我點擊另一個標記，我如何設置th e顏色爲藍色的前綴標記

來源

2015-05-12 Pawan

您已經有了所有標記的數組。循環播放它們，重置它們的圖標。

要麼爲所有標記執行此操作，請將當前標記設置爲藍色。或者在循環中有一個if語句來檢查循環的是否是當前點擊的（我更喜歡第一個選項）。

google.maps.event.addListener(global_markers[i], 'click', function() { 
    for (var j = 0; j < global_markers.length; j++) { 
     global_markers[j].setIcon("http://maps.google.com/mapfiles/ms/icons/red-dot.png"); 
    } 

    this.setIcon("http://maps.google.com/mapfiles/ms/icons/blue-dot.png"); 
    infowindow.setContent(this['infowindow']); 
    infowindow.open(map, this); 
});

來源

2015-05-12 08:05:23 duncan

非常感謝，它的工作的罰款。 – Pawan

您的原始標記是默認標記。將其重新設置爲setIcon(null)。

google.maps.event.addListener(global_markers[i], 'click', function() { 
    for (var j = 0; j < global_markers.length; j++) { 
     global_markers[j].setIcon(null); 
    } 
    this.setIcon("http://maps.google.com/mapfiles/ms/icons/blue-dot.png"); 
    infowindow.setContent(this['infowindow']); 
    infowindow.open(map, this); 
});

working fiddle

代碼片段：

var map; 
 
var global_markers = []; 
 
var markers = [ 
 
    [37.09024, -95.712891, 'trialhead0'], 
 
    [-14.235004, -51.92528, 'trialhead1'], 
 
    [-38.416097, -63.616672, 'trialhead2'] 
 
]; 
 

 
var infowindow = new google.maps.InfoWindow({}); 
 

 
function initialize() { 
 
    geocoder = new google.maps.Geocoder(); 
 
    var latlng = new google.maps.LatLng(40.77627, -73.910965); 
 
    var myOptions = { 
 
    zoom: 1, 
 
    center: latlng, 
 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
 
    } 
 
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
 
    addMarker(); 
 
} 
 

 
function addMarker() { 
 
    for (var i = 0; i < markers.length; i++) { 
 
    // obtain the attribues of each marker 
 
    var lat = parseFloat(markers[i][0]); 
 
    var lng = parseFloat(markers[i][1]); 
 
    var trailhead_name = markers[i][2]; 
 

 
    var myLatlng = new google.maps.LatLng(lat, lng); 
 

 
    var contentString = "<html><body><div><p><h2>" + trailhead_name + "</h2></p></div></body></html>"; 
 

 
    var marker = new google.maps.Marker({ 
 
     position: myLatlng, 
 
     map: map, 
 
     title: "Trailhead name: " + trailhead_name 
 
    }); 
 

 
    marker['infowindow'] = contentString; 
 

 
    global_markers[i] = marker; 
 

 
    google.maps.event.addListener(global_markers[i], 'click', function() { 
 
     for (var j = 0; j < global_markers.length; j++) { 
 
     global_markers[j].setIcon(null); 
 
     } 
 

 
     this.setIcon("http://maps.google.com/mapfiles/ms/icons/blue-dot.png"); 
 
     infowindow.setContent(this['infowindow']); 
 
     infowindow.open(map, this); 
 
    }); 
 
    } 
 
} 
 

 
window.onload = initialize;

#map_canvas { 
 
    width: 600px; 
 
    height: 500px; 
 
}

<script src="http://maps.google.com/maps/api/js"></script> 
 
<div id="map_canvas"></div>

來源

2015-05-12 10:11:21 geocodezip

如何將之前點擊的標記顏色更改爲其原始顏色

回答

相關問題