Question

 google.maps.event.addListener(newMarker, 'rightclick', ( function(newMarker){ 
        return function() {

            var icon;
            icon = newMarker.getIcon();
            newMarker.setIcon('delPin.png');

            if (confirm('Sure to delete selected marker?')) {

                 newMarker.setMap(null);      

            }else newMarker.setIcon(icon);
        }; 
    })(newMarker));

我需要能够显示不同的图标，突出显示它，同时右键单击标记并且确认消息正在等待用户操作。然后，如果答案是肯定的，则代码必须明确删除标记，而在否定答案的情况下，它必须将标记的图标重置为先前的值。在页面执行中，它似乎忽略了命令newMarker.setIcon（'delPin.png'）;并首先执行confirm命令，因此没有图标更改。如果我删除if语句，则侦听器会正确地更改图标，这意味着图像源或命令语法没有问题。

有关问题的建议以及如何解决？在此先感谢您的支持。

Answer 1

在执行confirm之前，您似乎需要给浏览器加载时间并呈现新图标。

google.maps.event.addListener(newMarker, 'rightclick', (function(newMarker) {
  return function() {
    var icon;
    icon = newMarker.getIcon();
    newMarker.setIcon('http://maps.google.com/mapfiles/ms/micons/blue.png');

    // delay to allow new icon to load and render.
    setTimeout(function() {
      if (confirm('Sure to delete selected marker?')) {
        newMarker.setMap(null);
      } else newMarker.setIcon(icon);
    }, 1000);
  };
})(newMarker));

proof of concept fiddle

代码段

function initialize() {
  var map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  var newMarker = new google.maps.Marker({
    position: map.getCenter(),
    map: map,
    icon: 'http://maps.google.com/mapfiles/ms/micons/green.png'
  })

  google.maps.event.addListener(newMarker, 'rightclick', (function(newMarker) {
    return function() {
      var icon;
      icon = newMarker.getIcon();
      newMarker.setIcon('http://maps.google.com/mapfiles/ms/micons/blue.png');
      setTimeout(function() {
        if (confirm('Sure to delete selected marker?')) {
          newMarker.setMap(null);
        } else newMarker.setIcon(icon);
      }, 1000);
    };
  })(newMarker));
}
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>

关于事件监听器上图标标记的动态变化的问题（google maps JS api）

1 个答案: