在谷歌地图 V3 中更改标记大小 [英] Change marker size in Google maps V3

问题描述

我正在使用 地图上的位置)将在您离开锚点(第 4 个参数)null 时自动与图钉的视觉提示搭配.换句话说，让锚点为空可以确保尖端指向它应该指向的地方.

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

通过实验，我发现阴影的尖端应该是这样设置的:x 是尺寸的 1/3，y 是尺寸的 100%.

var pinShadow = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_shadow",空值，空值，/* 偏移 x 轴整体尺寸的 33%，偏移 y 轴整体尺寸的 100% */新的 google.maps.Point(40, 110),新的 google.maps.Size(120, 110));

给这个:

I am using this explanation of how to color a google maps marker by setting the icon using a MarkerImage, and the coloring works well. But I can't make the scaledSize argument change the size of the marker.

    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);

What is the correct use of the scaledSize argument to change the marker size? For example, how can I double the marker size?

解决方案

This answer expounds on John Black's helpful answer, so I will repeat some of his answer content in my answer.

The easiest way to resize a marker seems to be leaving argument 2, 3, and 4 null and scaling the size in argument 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)
);  

As an aside, this answer to a similar question asserts that defining marker size in the 2nd argument is better than scaling in the 5th argument. I don't know if this is true.

Leaving arguments 2-4 null works great for the default google pin image, but you must set an anchor explicitly for the default google pin shadow image, or it will look like this:

The bottom center of the pin image happens to be collocated with the tip of the pin when you view the graphic on the map. This is important, because the marker's position property (marker's LatLng position on the map) will automatically be collocated with the visual tip of the pin when you leave the anchor (4th argument) null. In other words, leaving the anchor null ensures the tip points where it is supposed to point.

However, the tip of the shadow is not located at the bottom center. So you need to set the 4th argument explicitly to offset the tip of the pin shadow so the shadow's tip will be colocated with the pin image's tip.

By experimenting I found the tip of the shadow should be set like this: x is 1/3 of size and y is 100% of size.

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)); 

to give this:

这篇关于在谷歌地图 V3 中更改标记大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！