Question

我正在Google地图上显示标记。

当我点击标记时，我将其设置为不同的颜色（蓝色）

像这样

        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/

我的问题是，当我点击另一个标记时，如何将蓝色的流行标记设置为其原始颜色

Answer 1

你已经拥有了所有标记的数组。循环遍历它们，重置它们的图标。

对所有标记执行此操作，然后将当前标记设置为蓝色。或者在循环中有一个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);
});

Answer 2

您的原始标记是默认标记。将其设置回该电话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>

如何将之前单击的标记颜色更改为其原始颜色

2 个答案: