点击更改谷歌地图标记

Change google maps marker on click

本文关键字：地图 图标 谷歌      更新时间：2023-12-04

嘿，我有一个产品循环，每个产品都有自己的数据位置="number"

我希望能够在单击其中一个按钮时根据其位置更改标记图标。

<button class="btn" data-location="80"></button>
<button class="btn" data-location="81"></button>
<button class="btn" data-location="82"></button>

以便数据位置="80"的标记变为绿色或在点击时更改图像

这是我的addMarker函数

function addMarker(location) {
    location.Position = { 
        lat: parseFloat(location.mapURL.split(',')[0]),
        lng: parseFloat(location.mapURL.split(',')[1]) 
    };
    location.Marker = new google.maps.Marker({
        icon: 'images/map-marker-blue-2.png',
        map: map,
        position: location.Position,
        title: location.name,
    });
}

如果您需要更多信息，请告诉我

您可以使用setIcon

 marker.setIcon('newImage.png');

你应该使用一个标记数组填充你创建的标记

var markers ;
function addMarker(location) {
  location.Position = { 
    lat: parseFloat(location.mapURL.split(',')[0]),
    lng: parseFloat(location.mapURL.split(',')[1]) 
};
location.Marker = new google.maps.Marker({
    icon: 'images/map-marker-blue-2.png',
    map: map,
    position: location.Position,
    title: location.name,
});
markers.push[location.Marker];

}

然后你可以在点击按钮时使用一个带有参考标记id 的功能

<button class="btn" data-location="80" onclick="changeMarker(80);"></button>
function changeMarker(id){
   markers[id].setIcon('newImage.png'); 
}
相关文章：