单击其他 Geojson 点时恢复样式

Question

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

我想要做的是在单击同一数据层（and/or 其他层）的另一个 Geojson 点时将图标恢复到其原始状态。

这听起来很简单（可能确实如此），但我似乎无法理解。

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();
});

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

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

代码片段：

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);

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

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

单击其他 Geojson 点时恢复样式

Revert style when click on other Geojson point

javascript

geojson

google-maps-api-3