javascript - 删除/禁用 google.maps.Data 类中功能子集的事件监听器

Question

我正在尝试更改 google.maps.Data 类中要素的图标表示，以便在单击某个要素后，新图标会一直保留到单击另一个要素为止。 . .all 同时保持 mouseover 和 mouseout 事件监听器对其余功能处于事件状态。

除了使单击的功能图标保持为 wx_click.png 之外，我已经完成了所有操作，一旦我将鼠标移开它，样式就会恢复(根据代码)。我不想删除任何其他功能的 mouseout 或 mouseover 监听器，只是被单击的那个。

/* ~~ Mouseover listener ~~ */
map.data.addListener('mouseover', function(event) {
    map.data.revertStyle();
    map.data.overrideStyle(event.feature, {
        icon: '/img/wx_mo.png', 
        title: 'weather station',
    })
});

/* ~~ Mouseout listener ~~*/
mouseoutEventListener = map.data.addListener('mouseout', function(event) {
    map.data.revertStyle();
});

/* ~~ Click listener ~~ */
map.data.addListener('click', function(event) {

    map.data.overrideStyle(event.feature, {icon: '/img/wx_click.png'});

// do other stuff
});

Answer 1

在点击处理程序中:

将点击的标记存储在一个变量中。 当此变量不等于单击的特征时，恢复存储特征的样式。

在 mouseover/mouseout-handlers 中:

仅当当前特征不等于存储的特征时才更改图标/恢复当前特征的样式。

/* ~~ Mouseover listener ~~ */
map.data.addListener('mouseover', function(event) {
    if(map.get('activeFeature')!=event.feature ){
    map.data.overrideStyle(event.feature, {
        icon: '/img/wx_mo.png'
    });
    }
});

/* ~~ Mouseout listener ~~*/
mouseoutEventListener = map.data.addListener('mouseout', function(event) {
    if(map.get('activeFeature')!=event.feature ){
      map.data.revertStyle(event.feature);
    }
});

/* ~~ Click listener ~~ */
map.data.addListener('click', function(event) {
    var activeFeature=map.get('activeFeature');
    if(activeFeature && activeFeature!=event.feature ){
      map.data.revertStyle(activeFeature);
    }
    map.set('activeFeature',event.feature);
    map.data.overrideStyle(event.feature, {
      icon: '/img/wx_click.png'
    });

// do other stuff
});

---

演示:

function initialize() {
  map = new google.maps.Map(document.getElementById('map-canvas'), {
    zoom: 6,
    center: {
      lat: 0,
      lng: 0
    }
  });
  map.data.setStyle({
    icon: 'http://maps.gstatic.com/mapfiles/markers2/marker.png'
  });


  /* ~~ Mouseover listener ~~ */
  map.data.addListener('mouseover', function(event) {
    if (map.get('activeFeature') != event.feature) {
      map.data.overrideStyle(event.feature, {
        icon: 'http://maps.gstatic.com/mapfiles/markers2/icon_green.png'
      });
    }
  });

  /* ~~ Mouseout listener ~~*/
  mouseoutEventListener = map.data.addListener('mouseout', function(event) {
    if (map.get('activeFeature') != event.feature) {
      map.data.revertStyle(event.feature);
    }
  });

  /* ~~ Click listener ~~ */
  map.data.addListener('click', function(event) {
    var activeFeature = map.get('activeFeature');
    if (activeFeature && activeFeature != event.feature) {
      map.data.revertStyle(activeFeature);
    }
    map.set('activeFeature', event.feature);
    map.data.overrideStyle(event.feature, {
      icon: 'http://maps.gstatic.com/mapfiles/markers2/boost-marker-mapview.png'
    });

    // do other stuff
  });

  // Load GeoJSON.
  map.data.addGeoJson({
    "type": "FeatureCollection",
    "features": [{
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [0, 0]
      }
    }, {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [1, 1]
      }
    }, {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [-1, -1]
      }
    }]
  });
}

google.maps.event.addDomListener(window, 'load', initialize);

html,
body,
#map-canvas {
  height: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js?v=3"></script>
<div id="map-canvas"></div>