我的代码在下面，我想更改 ID 与地图外部的

my code is below i want to change the icon of marker whose id match with <div> tag which is outside from map

本文关键字：ID 地图外部在下面代码我的更新时间：2023-09-26

标签匹配的标记图标。

我的代码在下面，我想更改其ID与地图外部的标签匹配的标记的图标。

        var red_marker = "images/marker_red.png";
         function initialize() {
            var mapOptions = {
                zoom: 10,
                center: new google.maps.LatLng(52.4, -1.897208)
            }
            var map = new google.maps.Map(document.getElementById('map_canvas'),
                    mapOptions);
            setMarkers(map, beaches);
        }
        var beaches = [
            ['ibis Birmingham Airport', 52.452656, -1.730548, 3, 'image2.jpg', 'image1.jpg', 'image3.jpg', '2000', 'Ambassador Road<br />Bickenhill<br />Solihull<br />Birmingham<br />B26 3AW', '(+44)1217805800', '(+44)1217805810', 'info@ibisbhamairport.com', 'http://www.booknowaddress.com'],
            ['ETAP Birmingham Airport', 52.452527, -1.731644, 2, 'image4.jpg', 'image5.jpg', 'image6.jpg', '2500', 'Ambassador Road<br />Bickenhill<br />Solihull<br />Birmingham<br />B26 3QL', '(+44)1217805858', '(+44)1217805860', 'info@etapbhamairport.com', 'http://www.booknowaddress.com'],
            ['ibis Birmingham City Centre', 52.475162, -1.897208, 1, 'image7.jpg', 'image8.jpg', 'image9.jpg', '3000', 'Ladywell Walk<br />Birmingham<br />B5 4ST', '(+44)1216226010', '(+44)1216226020', 'info@ibisbhamcity.com', 'http://www.booknowaddress.com']
        ];
        function setMarkers(map, locations) {
            var image = {
                url: 'images/marker_red.png'
            };
            var shape = {
                coords: [1, 1, 1, 20, 18, 20, 18, 1],
                type: 'poly'
            };
            var infowindow = new google.maps.InfoWindow(), marker, i;
            for (var i = 0; i < locations.length; i++) {
                var beach = locations[i];
                var myLatLng = new google.maps.LatLng(beach[1], beach[2]);
              var infowindow = new google.maps.InfoWindow({maxWidth: 325}), marker, i;
                var marker = new google.maps.Marker({
                    position: myLatLng,
                    icon: red_marker,
                    map: map
                });
                marker.set("type", "point");
                marker.set("id", beaches[i][3]);
                var mv = marker.get("id");

                google.maps.event.addListener(marker, 'click', (function (marker, i) {
                    var imgs = beaches[i][4];
                    var contentString = '<div id="content">' +
                            '<div id="bodyContent">' +
                            '<div id="myCarousel5" class="carousel slide"><div class="carousel-           inner"><div class="item active"><div class="fill"><img class="col-md-12" src="listing_upload_images/'    +
                            beaches[i][4] + '"></div></div><div class="item"><div class="fill"><img class="col-md-12" src="listing_upload_images/' +
                            beaches[i][5] + '" ></div></div><div class="item"><div class="fill"><img class="col-md-12" src="listing_upload_images/' +
                            beaches[i][6] + '"></div></div></div><a class="left carousel-control" href="#myCarousel5" data-slide="prev"><img src="images/left_arrow.png" class="arrow_position" ></a><a class="right carousel-control" href="#myCarousel5" data-slide="next"><img src="images/right_arrow.png" class="arrow_position" ></a>' +
                            '</div><div class="money-info">' +
                            beaches[i][7] + '</div><div class="heart-img"><a href="#"></a></div><p><a href="#">'+
                            'In the Heart of Harlem, NYC</a></p><p><a class="gtrcvh" href="#">Private room  12 reviews  Harlem,</a></p>' +
                            '</div>' +
                            '</div>';
                    return function () {
                        infowindow.setContent(contentString);
                        infowindow.open(map, marker);
                    }
                })(marker, i));

                $(".same-col-3").mouseover(function(){ 
                    if (mv == $(this).find("span").attr("id"))
                        {
                $("#2").mouseover(function () {
                    var icon = $(this).find("img").attr('src');
                    marker.setIcon(icon);
                });
                $("#2").mouseout(function () {
                    var icon = $(this).find("img").attr('alt');
                    marker.setIcon(icon);
                });
                }
                else{
                    return false;
                }
                 });
   });
            }
        }
        google.maps.event.addDomListener(window, 'load', initialize);
</script>

这是我打开不同信息窗口数据的代码，我想更改标记的图标，该图标根据 ID 与 HTML 匹配的 id 进行更改

您希望在鼠标悬停和鼠标退出事件上设置侦听器，而不是直接分配标记的 mouseover（）和 mouseout（）函数。像这样：

 google.maps.event.addListener(marker, 'mouseover', (function (marker, i) {
  return function () {
   console.log("hovering over item " + i);
   marker.setIcon(green_marker);
  };
 })(marker, i));
 google.maps.event.addListener(marker, 'mouseout', (function (marker, i) {
  return function () {
   console.log("hovering over item " + i);
   marker.setIcon(red_marker);
  };
 })(marker, i));