KML Placemark图标在Google Earth与Google Maps锚点不一致原因及解决方法

Google Earth 与 Google Maps API 对未明确指定锚点的KML自定义图标采用了不同的默认规则：

• Google Earth 默认无锚点配置的自定义图标锚点为图标中心
• Google Maps API 加载KML时，未指定锚点的自定义图标默认锚点为图标底部中心
  这就是两类平台显示效果存在差异的核心原因。

最通用的方案是直接修改KML文件中的IconStyle配置，添加<hotSpot>标签明确指定锚点为图标中心，该配置在Google Earth和Google Maps中均可兼容生效。

你需要在原有<IconStyle>节点内新增hotSpot配置，修改后的完整Parking样式代码如下：

<Style id="Parking">
    <IconStyle>
        <Icon>
            <href>http://www.virtualmountains.co.uk/shared/Parking.png</href>
        </Icon>
        <!-- 新增锚点配置：x、y均为0.5，单位为分数，代表图标宽高的中心位置 -->
        <hotSpot x="0.5" y="0.5" xunits="fraction" yunits="fraction"/>
    </IconStyle>
    <BalloonStyle>
        <text>$[description]</text>
        <bgColor>white</bgColor>
        <text><![CDATA[
            <font color="#674A32" face="arial" align="justify">$[description]</font>
        ]]></text>
    </BalloonStyle>
    <LabelStyle>
        <color>FFFFFFFF</color>
        <scale>0.8</scale>
    </LabelStyle>
</Style>

参数说明：

• xunits="fraction"、yunits="fraction"表示x、y值采用分数单位，取值范围为0到1，和图标实际像素尺寸无关
• x="0.5"表示锚点横向在图标宽度的50%位置
• y="0.5"表示锚点纵向在图标高度的50%位置

修改保存KML后重新加载即可，两端的图标锚点就会统一为中心位置。如果不方便修改KML，也可以在Google Maps JS API加载KmlLayer时，通过StyledIcon类自定义锚点规则，不过需要遍历所有地标匹配样式，实现复杂度更高，优先推荐修改KML的方案。

内容的提问来源于stack exchange，提问作者Derek