单击其他时更改 Google 地图标记图标 [英] Change Google Maps marker icon when clicking on other

问题描述

我创建了一个 Google Maps Multiple Locations 页面，使用高级自定义字段 Google 地图字段.

我已设法在点击时更改标记图标，但我希望在点击其他图标时将其更改回来.

这是一个代码示例:

 for (i = 0; i 

这里的工作代码更好看:http://jsfiddle.net/gargiguy/s8vgxp3g

解决方案

duncan 说的:您要做的是将所有标记添加到一个数组中.在您的点击事件处理程序中，循环遍历该数组，更新每个标记的图标.然后最后只为被点击的标记设置图标.

google.maps.event.addListener(marker, 'click', (function (marker, i) {返回函数(){infowindow.setContent(locations[i][0],locations[i][6]);infowindow.open(地图，标记)；for (var j = 0; j 

工作小提琴

工作代码片段:

var 标记 = [];无功地图；函数初始化(){map = new google.maps.Map(document.getElementById('map'), {缩放:12，//中心:新的 google.maps.LatLng(-33.92, 151.25),中心:新的 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 标记，我；for (i = 0; i 

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

I have created a Google Maps Multiple locations page, using Advanced Custom Fields Google Map field.

I have managed to make the marker icon change when clicked on, but I want it to be changed back when clicking on other icons.

here is an example of the code:

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

Better look of the working code here: http://jsfiddle.net/gargiguy/s8vgxp3g

解决方案

What duncan said: What you want to do is add all your markers to an array. In your click event handler, loop over that array, updating each marker's icon. Then finally set the icon for just the marker that's been clicked.

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

working fiddle

working code snippet:

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>

这篇关于单击其他时更改 Google 地图标记图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！