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

时间:2011-10-20 21:51:30

标签: google-maps-api-3 google-maps-markers

我正在使用this explanation如何通过使用MarkerImage设置图标来为Google地图标记着色,并且着色效果很好。但我不能让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参数更改标记大小的正确用途是什么?例如,如何将标记尺寸加倍?

2 个答案:

答案 0 :(得分:79)

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

调整标记大小的最简单方法似乎是将参数2,3和4保留为null并缩放参数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阴影图像明确设置一个锚点,否则它将如下所示:

what happens when you leave anchor null on an enlarged shadow

当您在地图上查看图形时,图像的底部中心恰好与图钉的尖端并置。这很重要,因为当你离开锚点(第四个参数)null时,标记的位置属性(地图上标记的LatLng位置)将自动与引脚的可视尖端并置。换句话说,将锚点保留为null可确保尖端指向应该指向的位置。

但是,阴影的尖端不在底部中心。因此,您需要明确设置第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)); 

给出这个:

offset the enlarged shadow anchor explicitly

答案 1 :(得分:24)

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

new google.maps.Size(42,68)

我发现让map 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)
);