Question

在Google Maps API参考中，我看到有一个图标对象类可用于标记： https://developers.google.com/maps/documentation/javascript/3.exp/reference#Icon

google.maps.Icon object specification
Properties :
anchor  (Type:  Point)
labelOrigin (Type:  Point)
origin  (Type:  Point)
scaledSize  (Type:  Size)
size    (Type:  Size)
url     (Type:  string)

但是如果我想为折线使用自定义符号，那么它似乎无法使用png文件图标。对于折线，我可以看到有一个＆＃34;图标＆＃34;属于＆＃34; icon＆＃34;属性。 https://developers.google.com/maps/documentation/javascript/examples/overlay-symbol-custom 但是有一个符号对象链接到这个＆＃34; icon＆＃34;属性。示例：

var symbolOne = {
    path: 'M -2,0 0,-2 2,0 0,2 z',
    strokeColor: '#F00',
    fillColor: '#F00',
    fillOpacity: 1
  };

我试过第一次用自定义的png文件图标替换symbolOne对象：

icon: symbolOne - ＆gt;由icon: "icon.png"替换，但它不起作用。

然后我在动画符号示例中看到，还有一条＆＃34;路径＆＃34;符号对象的属性。

查看网站 - ＆gt; developers.google.com/maps/documentation/javascript/examples/overlay-symbol-animate

我尝试用这样的png图标替换此属性值：

path: google.maps.SymbolPath.CIRCLE - ＆gt;由path: "icon.png替换，但它不起作用。

有没有办法将折线对象的自定义图标（png文件）关联起来？

雷姆。我仅限于编写2个链接，因此第3个链接未满。

Answer 1

Polyline接受一种Array IconSequence 类型，其中包含一个名为“icon”的属性，接受google.maps.Symbol，而不是google.maps.Icon！所以不接受png。

Png文件在折线内没有任何意义，因为折线不是图像，而是用数学绘制，就像google.maps.Symbol一样。如果你想要，你可以找到一个svg文件（数学图像），它代表你的png和使用相同的东西。

如果你想使用png，你可以像这个例子一样制作一个标记： https://jsfiddle.net/TomKarachristos/z8e3p70n/

  var image = {
    anchor: new google.maps.Point(0, 32),
    origin: new google.maps.Point(0, 0),
    scaledSize: new google.maps.Size(32, 32),
    size: new google.maps.Size(64, 64),
    url: "http://www.bookyourparis.com/images-site/beachflag.png"
  };

  var beachMarker = new google.maps.Marker({
    position: {lat: 22.291, lng: 153.027},
    map: map,
    icon: image
  });


  // Create the polyline and add the symbols via the 'icons' property.
  var line = new google.maps.Polyline({
    path: [{lat: 22.291, lng: 153.027}, {lat: 18.291, lng: 153.027}],
    map: map
  });

Google maps api v3.22 - 如何将自定义图标添加为折线对象的png文件？

1 个答案: