单击其他时更改谷歌地图标记图标

Posted 2023-03-25

【中文标题】单击其他时更改谷歌地图标记图标

【英文标题】：Change Google Maps marker icon when clicking on other

【发布时间】：2015-03-01 11:45:23

【问题描述】：

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

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

下面是代码示例：

    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

【参考方案1】：

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

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

工作代码sn-p：

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>

【讨论】：

如果您只需要更改前一个图标，我不建议遍历每个标记并更新每个图标。

【参考方案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));

【参考方案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());
    );

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

【讨论】：

警告。同一个标记可以多次点击，这可能需要额外的编码。

@Jaider，如果单击相同的标记，它将执行相同的代码行，但在 UI 上不会有任何效果。如果您不想执行相同的标记代码，则可以编写忽略代码。前任。 prevMarker === this 然后返回。