更改 Google 地图 V3 中的标记大小

Posted 2023-02-23

【中文标题】更改 Google 地图 V3 中的标记大小

【英文标题】：Change marker size in Google maps V3

【发布时间】：2011-12-12 03:58:51

【问题描述】：

我正在使用this explanation 来了解如何通过使用MarkerImage 设置图标来为谷歌地图标记着色，并且着色效果很好。但是我不能让 scaledSize 参数改变标记的大小。

    var pinColor = 'FFFF00';
    var pinIcon = new google.maps.MarkerImage(
        "http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|" + pinColor,
        new google.maps.Size(21, 34),
        new google.maps.Point(0,0),
        new google.maps.Point(10, 34),
        new google.maps.Size(2, 4));
    marker.setIcon(pinIcon);

使用 scaledSize 参数更改标记大小的正确方法是什么？例如，如何将标记大小加倍？

【参考方案1】：

这个答案在John Black's helpful answer上阐述，所以我会在我的答案中重复他的一些答案内容。

调整标记大小的最简单方法似乎是将参数 2、3 和 4 保留为空，并在参数 5 中缩放大小。

var pinIcon = new google.maps.MarkerImage(
    "http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|FFFF00",
    null, /* size is determined at runtime */
    null, /* origin is 0,0 */
    null, /* anchor is bottom center of the scaled image */
    new google.maps.Size(42, 68)
);  

顺便说一句，this answer 对一个类似的问题断言，在第二个参数中定义标记大小比在第​​五个参数中进行缩放更好。不知道是不是真的。

将参数 2-4 保留为 null 对于默认的 google pin 图像非常有效，但您必须为默认的 google pin 阴影图像显式设置锚点，否则它将如下所示：

当您在地图上查看图形时，图钉图像的底部中心恰好与图钉的尖端并置。这很重要，因为当您离开锚点（第 4 个参数）null 时，标记的位置属性（标记在地图上的 LatLng 位置）将自动与图钉的可视提示搭配。换句话说，让锚点为空可以确保它应该指向的尖端点。

但是，阴影的尖端并不位于底部中心。因此，您需要明确设置第 4 个参数来偏移针阴影的尖端，以便阴影的尖端与针图像的尖端位于同一位置。

通过实验，我发现阴影的尖端应该这样设置：x 是大小的 1/3，y 是大小的 100%。

var pinShadow = new google.maps.MarkerImage(
    "http://chart.apis.google.com/chart?chst=d_map_pin_shadow",
    null,
    null,
    /* Offset x axis 33% of overall size, Offset y axis 100% of overall size */
    new google.maps.Point(40, 110), 
    new google.maps.Size(120, 110)); 

给这个：

【讨论】：

有什么方法可以保留google.maps.Size 的纵横比，或者指定百分比而不是实际像素？谢谢！

有没有办法重新缩放默认标记图标？也就是说，我可以更改标记的缩放比例而不必在标记上使用setIcon？

【参考方案2】：

大小参数以像素为单位。因此，要将示例的标记大小加倍，MarkerImage 构造函数的第五个参数将是：

new google.maps.Size(42,68)

我发现让地图 API 找出其他参数最容易，除非我需要图像的底部/中心以外的东西作为锚点。在你的情况下，你可以这样做：

var pinIcon = new google.maps.MarkerImage(
    "http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|" + pinColor,
    null, /* size is determined at runtime */
    null, /* origin is 0,0 */
    null, /* anchor is bottom center of the scaled image */
    new google.maps.Size(42, 68)
);