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

问题描述

我使用此解释如何使用 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， 
新google.maps.Size（21,34），
新google.maps.Point（0,0），
新google.maps.Point（10,34），
 new google.maps.Size（2，4））; 
 marker.setIcon（pinIcon）; 
  

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

解决方案

这个答案阐述了，所以我会在我的答案中重复他的一些答案内容。

p>

调整标记的最简单方法似乎是将参数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在运行时确定* / 
 null，/ *原点为0,0 * / 
 null，/ * anchor为底部缩放图像的中心* / 
 new google.maps.Size（42，68）
）; 
  

另外，这个答案对一个类似的问题断言在第二个参数中定义标记大小比在第​​五个参数中定标要好。我不知道这是真的。

离开参数2-4 null对于默认的google pin图像很有用，但是您必须明确地为默认设置一个锚点谷歌销阴影图像，或者它会看起来像这样：

当您查看图片时，图片底部的中心恰好与针尖配置在一起在地图上的图形。这很重要，因为标记的位置属性（标记的 LatLng 在地图上的位置）将自动与当您离开锚点（第四个参数） null 时引脚的视觉提示放置在一起。换句话说，让锚点保持空状态可以确保提示点指向的地方。

然而，阴影的尖端并不位于底部中心。因此，您需要明确设置第四个参数以抵消针阴影的顶端，以便阴影顶端与针图像的顶端同位。

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

  var pinShadow = new google.maps.MarkerImage（
http://chart.apis.google.com/chart?chst= d_map_pin_shadow，
 null，
 null，
 / *偏移x轴整体大小的33％，偏移y轴整体大小的100％* / 
 new google.maps.Point （40，110），
 new 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:

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