单击其他Geojson点时还原样式

Question

我创建了一个包含多个Geojson数据图层的Google地图，放置自定义图标并在点击时更改相同的图标，到目前为止一切都很好。

我尝试做的是在点击同一数据层（和/或其他图层）的另一个Geojson点时将图标恢复为原始状态。

这听起来很简单（可能是），但我似乎无法弄明白。

＆＃13;

＆＃13;

var infowindow = new google.maps.InfoWindow();
var offices = new google.maps.Data();

offices.addGeoJson({
  "type": "FeatureCollection",
  "features": [{
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [4.403528, 51.260561]
      },
      "properties": {
        "Location": "Antwerp",
        "Country": "BE"
      }
    },
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [9.986818, 53.554377]
      },
      "properties": {
        "Location": "Hamburg",
        "Country": "DE"
      }
    }
  ]
});

offices.setStyle({
  icon: 'images/icons/logo-1.png'
});
offices.setMap(map);
offices.addListener('click', function(event) {

  var office_location = event.feature.getProperty("Location");
  var office_country = event.feature.getProperty("Country");

  infowindow.setContent(office_location + " - " + office_country);

  infowindow.setPosition(event.feature.getGeometry().get());
  infowindow.setOptions({
    pixelOffset: new google.maps.Size(0, -30)
  });

  offices.overrideStyle(event.feature, {
    icon: 'images/icons/logo-2.png'
  });
  infowindow.open(map);
  map.panTo(event.latLng);
});

google.maps.event.addListener(infowindow, 'closeclick', function() {
  offices.revertStyle();
});

google.maps.event.addListener(map, 'click', function() {
  infowindow.close();
  offices.revertStyle();
});

＆＃13;

＆＃13;

＆＃13;

我希望你能帮我解决这个问题。

Answer 1

保存上一个功能;单击新功能时还原它：

if (previousFeature != null) 
  offices.revertStyle(previousFeature);

offices.overrideStyle(event.feature, {
  icon: 'http://maps.google.com/mapfiles/ms/micons/blue.png'
});
previousFeature = event.feature;

proof of concept fiddle

代码段

＆＃13;

＆＃13;

function initialize() {
  var map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(51.260561, 4.403528),
      zoom: 5,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  var infowindow = new google.maps.InfoWindow();
  var offices = new google.maps.Data();

  offices.addGeoJson({
    "type": "FeatureCollection",
    "features": [{
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [4.403528, 51.260561]
      },
      "properties": {
        "Location": "Antwerp",
        "Country": "BE"
      }
    }, {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [9.986818, 53.554377]
      },
      "properties": {
        "Location": "Hamburg",
        "Country": "DE"
      }
    }]
  });

  offices.setStyle({
    icon: 'http://maps.google.com/mapfiles/ms/micons/green.png'
  });
  offices.setMap(map);
  var previousFeature = null;
  offices.addListener('click', function(event) {

    var office_location = event.feature.getProperty("Location");
    var office_country = event.feature.getProperty("Country");

    infowindow.setContent(office_location + " - " + office_country);

    infowindow.setPosition(event.feature.getGeometry().get());
    infowindow.setOptions({
      pixelOffset: new google.maps.Size(0, -30)
    });
    if (previousFeature != null) offices.revertStyle(previousFeature);
    offices.overrideStyle(event.feature, {
      icon: 'http://maps.google.com/mapfiles/ms/micons/blue.png'
    });
    previousFeature = event.feature;
    infowindow.open(map);
    map.panTo(event.latLng);
  });

  google.maps.event.addListener(infowindow, 'closeclick', function() {
    offices.revertStyle();
  });

  google.maps.event.addListener(map, 'click', function() {
    infowindow.close();
    offices.revertStyle();
  });
}
google.maps.event.addDomListener(window, "load", initialize);

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;