在谷歌地图上设置SVG标记大小

Question

我目前正在努力设置我的SVG标记的大小，它们显示得很大，而且我不能像在JS中那样修改大小，因为我的地图在ACF中的设置方式。

有人能建议我修改SVG大小的方法吗？我真的不想使用PNG，因为它们看起来质量总是很低，而且文件大小比PNG大得多。

以下是我的代码：

function add_marker( $marker, map ) { 
// var
var latlng = new google.maps.LatLng( $marker.attr('data-lat'), $marker.attr('data-lng') );
var icon = $marker.attr('data-img');
// create marker
var marker = new google.maps.Marker({
position    : latlng,
map         : map,
icon        : icon,
});
// add to array
map.markers.push( marker );
// if marker contains HTML, add it to an infoWindow
if( $marker.html() )
{
// create info window
var infowindow = new google.maps.InfoWindow({
content     : $marker.html()
});
// show info window when marker is clicked
google.maps.event.addListener(marker, 'click', function() {          
infowindow.open( map, marker );
});
}
}

<?php if( have_rows('locations') ): ?>
<div class="acf-map">
<?php while ( have_rows('locations') ) : the_row(); $location = get_sub_field('location'); ?>
<?php $location_type = get_sub_field( 'location_type' ); ?>
<?php if ($location_type == 'oxford-college') { ?>
<?php $type_icon = get_stylesheet_directory_uri().'/assets/images/icon-square.svg'; ?>
<?php  } ?> 
<div class="marker" data-lat="<?php echo $location['lat']; ?>" data-lng="<?php echo $location['lng']; ?>" data-img="<?php echo $type_icon; ?>">
<h4><?php the_sub_field('title'); ?></h4>
<p class="address"><?php echo $location['address']; ?></p>
<p><?php the_sub_field('description'); ?></p>
</div>
<?php endwhile; ?>
</div>
<?php endif; ?>

创建标记的区域是：

data-img="<?php echo $type_icon; ?>

Answer 1

您可以在定义图标对象时使用scaledSize属性缩放图标的大小：

var icon = {
url: $marker.attr('data-img'), // url
scaledSize: new google.maps.Size(40, 40), // experiment with these values until you're satisfied
origin: new google.maps.Point(0,0), // set the base origin
anchor: new google.maps.Point(0, 0) // set the base anchor
};