点击即可更改谷歌地图标记

时间:2016-04-04 12:24:40

标签: javascript jquery html google-maps

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

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

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

这样标记的数据位置=&#34; 80&#34;变为绿色或点击

更改图像

这是我的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,
    });
}

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

1 个答案:

答案 0 :(得分:0)

您可以使用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];

}

然后你可以使用一个函数点击按钮并带有ref标记id

<button class="btn" data-location="80" onclick="changeMarker(80);"></button>

function changeMarker(id){
   markers[id].setIcon('newImage.png'); 
}