geoxml3：markerOptions{shape} 的语法答案

【问题标题】：geoxml3: Syntax for markerOptions{shape}geoxml3：markerOptions{shape} 的语法
【发布时间】：2014-08-10 20:33:02
【问题描述】：

我想限制 KML 文件中所有图标的可点击区域，但我对如何实现这一点有点困惑。这些图标都是相同的典型样式指针，我想将可点击区域限制在指针顶部所包围的圆圈内。图标是 19x32，所以我认为我想要一个圆心距顶部 9 像素，距左侧 9 像素，半径为 9 像素。如果 geoxml3 会这样做，我认为这将在解析器对象中指定，尽管它可能会在 KML 文件的 IconStyle 中。如果事实上那将在解析器对象中，我还没有找到正确的语法。显然不是：

var blues = new geoXML3.parser({map: map, singleInfoWindow: true, zoom: false, markerOptions: {shape: {type:circle, coords: [9px,9px,9px]}}});
blues.parse('allbluesdance.kml');

所以请把我弄清楚。

谢谢，画了

【问题讨论】：

标签： kml shape options marker geoxml3

【解决方案1】：

GeoXml3 的 markerOptions 选项正是 Google Maps Javascript API v3 markerOptions 对象。

您的图标是49x32 pixels，center of the circle is defined from the top left，因此您可能希望中心为 24,9，半径为 9：

        var blues = new geoXML3.parser({
              map: map,
              singleInfoWindow: true,
              suppressDirections: true,
              markerOptions: {
                shape: {
                  type: 'circle', 
                  coords: [24,9,9]
                }
              },
              zoom: false
            });

来自documentation on Complex Icons：

// Shapes define the clickable region of the icon.
// The type defines an HTML &lt;area&gt; element 'poly' which
// traces out a polygon as a series of X,Y points. The final
// coordinate closes the poly by connecting to the first
// coordinate.
var shape = {
  coords: [1, 1, 1, 20, 18, 20, 18 , 1],
  type: 'poly'
};

HTML area circle shape，看起来就像删除“px”（文档中说的是数字数组）应该可以工作，只是它位于图标的左侧。

working example

【讨论】：

谢谢，geocodezip。我明白了，嗯，我没有引用“圆圈”。现在它完美地工作了。我应该提到，但我将上一个问题中的图像拆分为 19x32 标记图像和 49x32 阴影。我将它们分别加载到不可点击阴影层上方的可点击标记层上。最初的原因是将每个制造商的可点击区域的大小从 49 像素宽减少到 19 像素。现在我可以指定可点击区域，图像大小不再是问题，但是有两个图层会引发另一个问题，我现在将单独发布。