[英]How to change marker size when using Google Maps setIcon
I am adding markers to a map, which are small when I originally add them. 我正在向地图添加标记,当我最初添加它们时它们很小。 However, I then loop over them and change some of them to another marker that has the same size but a different color: 但是,然后我循环遍历它们并将其中一些更改为另一个具有相同大小但颜色不同的标记:
HTML 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: 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');
}
});
However, the marker is being plotted as in a larger size: 但是,标记被绘制为更大的尺寸:
How can I dynamically set the size of the marker when using the setIcon
function, so that I can make these two markers the same size? 如何在使用setIcon
函数时动态设置标记的大小,以便我可以使这两个标记的大小相同?
I was setting the original points with: 我正在设置原始点:
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
});
AND then trying to set the points on the fly with: 然后尝试使用以下方法设置点数:
$.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);
}
});
You can use the size
or scaledSize
properties of the google.maps.Icon
object. 您可以使用google.maps.Icon
对象的size
或scaledSize
属性。 See the Docs and this example : 请参阅文档和此示例 :
var icon = {url:'/img/example_img.png', size: new google.maps.Size(20, 32)};
thisStateMarker.setIcon(icon);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.