javascript - 使用谷歌地图 setIcon 时如何更改标记大小

标签 javascript google-maps google-maps-api-3

我正在向 map 添加标记,这些标记在我最初添加时很小。但是,然后我循环遍历它们并将其中一些更改为另一个大小相同但颜色不同的标记:

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');       
    }
});

但是,标记被绘制为更大的尺寸:

enter image description here

如何在使用 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);              
    }
});

最佳答案

您可以使用 google.maps.Icon 对象的 sizescaledSize 属性。参见 the Docsthis example :

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

关于javascript - 使用谷歌地图 setIcon 时如何更改标记大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36358811/

相关文章:

javascript - 检查位置是否在收费公路上

google-maps - 自定义控件与 Google map Apiv3 上的信息窗口重叠

google-maps - Google Maps API 服务器拒绝了您的请求

javascript - 单击标记时突出显示侧边栏 block

javascript - Node.js 表达 POST 404ing

javascript - 具有箭头功能的 Angular 7 生产构建 (AOT)

javascript - 如何避免用户在 WebView 中的表单字段中输入?

javascript - 如何在 jQuery 中实现可排序的播放列表

java - Google Maps API Android - 膨胀类 fragment 时出错

javascript - Fusion Tables 查询不适用于 Google Maps JS API v3