如何改变标记大小时使用谷歌地图setIcon

Question

我正在向地图添加标记，当我最初添加它们时，它们很小。然而，我然后循环它们，并将其中的一些更改为另一个具有相同大小但不同颜色的标记：

HTML

<div class="row">
  <div class="small-6 columns">
    <select id="state-select" class="">
          <option value="">SELECT A STATE</option>
          <option value="OH">Ohio</option>
          <option value="IL">Illinois</option>
          <option value="IN">Indiana</option>
          <option value="MO">Missouri</option>
          <option value="MI">Michigan</option>
    </select>
  </div>
</div>
<div id="map-canvas"></div>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places" type="text/javascript"></script>

JS:

$.each(stateMarkerArr, function(index, thisStateMarker) {
    if (thisStateMarker.state == stateCode) {
        thisStateMarker.setIcon('/img/example_img.png');        
        bounds.extend(thisStateMarker.getPosition());           
    } else {
        thisStateMarker.setIcon('/img/example_img2.png');       
    }
});

但是，标记以较大的尺寸绘制：

如何在使用setIcon功能时动态设置标记的大小，以便使这两个标记的大小相同？

我用以下方法设定了原始点：

var icon = {
    url: '/img/example_img.png',
    scaledSize: new google.maps.Size(28,50)
}
var marker = new google.maps.Marker({
    position: currLatlng,
    map: map,
    title: thisLocation.Store,
    state: currentState,
    icon: icon
});

然后尝试通过以下方式动态设置点：

$.each(stateMarkerArr, function(index, thisStateMarker) {
    if (thisStateMarker.state == stateCode) {
        var icon = {
            url: '/img/example_img.png',
            scaledSize: new google.maps.Size(28,50)
        }       
        thisStateMarker.setIcon(icon);
        bounds.extend(thisStateMarker.getPosition());           
    } else {
        var icon = {
            url: '/img/example_img2.png',
            scaledSize: new google.maps.Size(28,50)
        }       
        thisStateMarker.setIcon(icon);              
    }
});

Answer 1

可以使用Icon对象的google.maps.属性。请参阅文档和此示例：

var icon = {url:'/img/example_img.png', size: new google.maps.Size(20, 32)};
thisStateMarker.setIcon(icon);