在 Google 个地图上设置 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
};

在 Google 个地图上设置 SVG 标记大小

Set SVG Marker sizes on Google Maps

wordpress

google-maps

google-maps-api-3

advanced-custom-fields

acfpro