如何在单击按钮上更改地图标记颜色

Question

在 infowindow.setContent 我有按钮我想在点击时更改标记颜色按钮我试过这个代码

      google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
          infowindow.setContent(locations[i][0] + locations[i][3] + " <button class='btn btn-primary btn-sm map-checked-box mr-1' onclick='myFunction();' data-id='"+ locations[i][3] +"'>Print</button> ");
          infowindow.open(map, marker);
        }
      })(marker, i ));
    }
    function myFunction() {
  infowindow.setContent('<div style="background-color: green">' + locations[i][0] + locations[i][3] + "</div>");
}

我正在调用 myfunction() 但它在这一行中不起作用 我想我在函数中输入了错误的位置

infowindow.setContent(locations[i][0] + locations[i][3] + " <button class='btn btn-primary btn-sm map-checked-box mr-1' onclick='myFunction();' data-id='"+ locations[i][3] +"'>Print</button> ");

Answer 1

您无法通过 CSS 更改标记的颜色，因为标记是图像。您必须为现有标记设置新图像才能获得更改后的标记颜色的效果。

一般步骤是：

将标记存储在稍后在 myFunction 中可用的变量中。
使用 setIcon(urlToNewImage)

Here is an example fiddle。点击更改按钮查看效果。

Refer to this link 获取在线提供的图标列表。

Answer 2

由

解决

function state(marker){ 
  marker.setIcon('http://maps.google.com/mapfiles/ms/micons/orange.png');
}

如何在单击按钮上更改地图标记颜色

how to change map marker color on click button

javascript

google-maps

button

google-maps-markers