点击其他内容时更改Google地图标记图标

Question

我已经使用高级自定义字段谷歌地图字段创建了一个Google Maps多位置页面。

我成功地实现了点击标记图标时图标的更改，但是我希望在单击其他图标时将其更改回来。

以下是代码示例:

    for (i = 0; i < locations.length; i++) {  
  marker = new google.maps.Marker({
    position: new google.maps.LatLng(locations[i][1], locations[i][2]),
    map: map,
    icon: iconBase + 'Stock%20Index%20Up.png'
  });

  google.maps.event.addListener(marker, 'click', (function(marker, i) {
    return function() {
      infowindow.setContent(locations[i][0], locations[i][6]);
      infowindow.open(map, marker);
      marker.setIcon("https://cdn3.iconfinder.com/data/icons/musthave/24/Stock%20Index%20Down.png");
    }
  })(marker, i));

这是一个更好的工作代码示例： http://jsfiddle.net/gargiguy/s8vgxp3g

- gargi

Answer 1

Duncan的建议是：将所有标记点添加到数组中。在单击事件处理程序中，循环遍历该数组，更新每个标记点的图标。最后，仅为被点击的标记点设置图标。

google.maps.event.addListener(marker, 'click', (function (marker, i) {
  return function () {
    infowindow.setContent(locations[i][0], locations[i][6]);
    infowindow.open(map, marker);
    for (var j = 0; j < markers.length; j++) {
      markers[j].setIcon("https://cdn3.iconfinder.com/data/icons/musthave/24/Stock%20Index%20Up.png");
    }
    marker.setIcon("https://cdn3.iconfinder.com/data/icons/musthave/24/Stock%20Index%20Down.png");
};

可运行的代码片段

可运行代码示例：

var markers = [];
var map;

function initialize() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 12,
    // center: new google.maps.LatLng(-33.92, 151.25),
    center: new google.maps.LatLng(36.8857, -76.2599),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });

  var infowindow = new google.maps.InfoWindow();
  var iconBase = 'https://cdn3.iconfinder.com/data/icons/musthave/24/';
  var marker, i;

  for (i = 0; i < locations.length; i++) {
    marker = new google.maps.Marker({
      position: new google.maps.LatLng(locations[i][1], locations[i][2]),
      map: map,
      icon: iconBase + 'Stock%20Index%20Up.png'
    });

    google.maps.event.addListener(marker, 'click', (function(marker, i) {
      return function() {
        infowindow.setContent(locations[i][0], locations[i][6]);
        infowindow.open(map, marker);
        for (var j = 0; j < markers.length; j++) {
          markers[j].setIcon("https://cdn3.iconfinder.com/data/icons/musthave/24/Stock%20Index%20Up.png");
        }
        marker.setIcon("https://cdn3.iconfinder.com/data/icons/musthave/24/Stock%20Index%20Down.png");
      };
    })(marker, i));
    markers.push(marker);

  }
}
google.maps.event.addDomListener(window, 'load', initialize);
var locations = [
  [
    "New Mermaid",
    36.9079, -76.199,
    1,
    "Georgia Mason",
    "",
    "Norfolk Botanical Gardens, 6700 Azalea Garden Rd.",
    "coming soon"
  ],
  [
    "1950 Fish Dish",
    36.87224, -76.29518,
    2,
    "Terry Cox-Joseph",
    "Rowena's",
    "758 W. 22nd Street in front of Rowena's",
    "found"
  ],
  [
    "A Rising Community",
    36.95298, -76.25158,
    3,
    "Steven F. Morris",
    "Judy Boone Realty",
    "Norfolk City Library - Pretlow Branch, 9640 Granby St.",
    "found"
  ],
  [
    "A School Of Fish",
    36.88909, -76.26055,
    4,
    "Steven F. Morris",
    "Sandfiddler Pawn Shop",
    "5429 Tidewater Dr.",
    "found"
  ],
  [
    "Aubrica the Mermaid (nee: Aubry Alexis)",
    36.8618, -76.203,
    5,
    "Myke Irving/ Georgia Mason",
    "USAVE Auto Rental",
    "Virginia Auto Rental on Virginia Beach Blvd",
    "found"
  ]
];

<script src="https://maps.google.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div>
  <div id="map" style="width: 500px; height: 400px;"></div>
</div>

- geocodezip

---

如果您只需要更改先前的图标，我不建议循环遍历每个标记并更新每个图标。 - Ryan Little

Answer 2

看起来你只需要将先前的图标改回原始状态，我建议不要遍历每个标记。在有许多标记的地图上，这可能会变得很重。

相反，我建议在单击事件中将活动标记存储在变量中，并在其更改时仅更新该标记。

var marker;
var activeMarker;
var iconDefault = iconBase + 'Stock%20Index%20Up.png';
var iconSelected = 'https://cdn3.iconfinder.com/data/icons/musthave/24/Stock%20Index%20Down.png';

for (i = 0; i < locations.length; i++) {  
  marker = new google.maps.Marker({
    position: new google.maps.LatLng(locations[i][1], locations[i][2]),
    map: map,
    icon: iconDefault
  });

  google.maps.event.addListener(marker, 'click', (function(marker, i) {
    return function() {
      infowindow.setContent(locations[i][0], locations[i][6]);
      infowindow.open(map, marker);

      // check to see if activeMarker is set
      // if so, set the icon back to the default
      activeMarker && activeMarker.setIcon(iconDefault);

      // set the icon for the clicked marker
      marker.setIcon(iconSelected);

      // update the value of activeMarker
      activeMarker = marker;
    }
  })(marker, i));
}

- Ryan Little

Answer 3

您可以按照以下方式进行操作：

var prevMarker = "";
var markers = [];
var image = { url: "your_png.png",
              scaledSize: new google.maps.Size(38, 40) // If you want to resize it.
            };

创建标记需要以下步骤：

var marker = createMarker(coordinate, map, image, id);  
// coordinate = {lat:float value,long:float value} and 'map' your map
function createMarker(lat, long, map, image, marker_id) {

    var coordinates = {lat: lat, lng: long};
    var marker = new google.maps.Marker({
                position: coordinates,
                icon: image,
                id: "marker_" + marker_id,
                map: map
    });

    return marker;
}

您可以使用标记动作。

marker.addListener('click', function() {
        console.log(this.id);

        if(prevMarker !== "") {
            prevMarker.setIcon({
                url: "your_image.png",
                scaledSize: new google.maps.Size(38, 40)
            });
        }
        prevMarker = this;
        this.setIcon({
            url: "your_image.png",
            scaledSize: new google.maps.Size(48, 50)
        });
        map.panTo(this.getPosition());
    });

循环标记代码适用于所有可用的标记。

- Nahush Sarje

---

警告。同一标记可能会被多次点击，这可能需要额外的编码。 - Jaider

@Jaider，如果点击相同的标记，则会执行相同的代码行，但在UI上不会有任何效果。如果您不想执行相同的标记代码，则可以编写忽略代码。例如：prevMarker === this then return. - Nahush Sarje