Вернуть стиль при нажатии на другую точку Geojson

Question

Вернуть стиль при нажатии на другую точку Geojson

1

Я создал карту Google с несколькими уровнями данных Geojson, разместив пользовательские значки и сделав то же самое изменение значка при нажатии, насколько это хорошо.

То, что я пытаюсь сделать, - вернуть значок обратно в исходное состояние при нажатии на другую точку 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();
});

Надеюсь, ты сможешь помочь мне с этим.

SckNL 24 окт. 2017, в 02:00

Источник

Теги:

javascript

google-maps-api-3

geojson

1 ответ

Ещё вопросы

geocodezip · Accepted Answer · 2017-10-23T23-30-00.000Z

Сохранить предыдущую функцию; верните его, когда вы нажмете на новую функцию:

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

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

доказательство концепции скрипки

фрагмент кода:

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>

Привет geocodezip, спасибо за ваш быстрый и очень полезный ввод. Ваше решение работает именно так, как и должно.