如何让KML文件的标签在Google Maps地标上正常显示？

问题场景 #

我有一个包含<LabelStyle>、<MultiGeometry>标签（内部包含<LineString>和<Point>）的KML文件，在Google Earth中可完美显示线条、点及点上方的标签，但通过Google Maps JavaScript API加载时，仅显示<LineString>和<Point>，标签却缺失。

KML文件内容 #

<?xml version='1.0' encoding='UTF-8'?>
<kml xmlns="http://www.opengis.net/kml/2.2" xmlns:gx="http://www.google.com/kml/ext/2.2" xmlns:kml="http://www.opengis.net/kml/2.2" xmlns:atom="http://www.w3.org/2005/Atom">
<Document>
    <name>lines.kmz</name>
    <Style id="LineStyle00">
        <LabelStyle>
            <color>ff0000ff</color>
            <scale>2.0</scale>
        </LabelStyle>
        <LineStyle>
            <color>ff00ff55</color>
            <width>3</width>
        </LineStyle>
        <PolyStyle>
            <color>00000000</color>
            <outline>0</outline>
        </PolyStyle>
    </Style>
    <Folder id="FeatureLayer0">
        <name>مسارات المصارف الجديدة</name>
        <Snippet maxLines="0"/>
        <Placemark id="ID_00000">
            <name>العياط</name>
            <Snippet maxLines="0"/>
            <description>&lt;html xmlns:fo="http://www.w3.org/1999/XSL/Format" xmlns:msxsl="urn:schemas-microsoft-com:xslt"&gt;

&lt;head&gt;

&lt;META http-equiv="Content-Type" content="text/html"&gt;

&lt;meta http-equiv="content-type" content="text/html; charset=UTF-8"&gt;

&lt;/head&gt;

&lt;body style="margin:0px 0px 0px 0px;overflow:auto;background:#FFFFFF;"&gt;

&lt;table style="font-family:Arial,Verdana,Times;font-size:12px;text-align:left;width:100%;border-collapse:collapse;padding:3px 3px 3px 3px"&gt;

&lt;tr style="text-align:center;font-weight:bold;background:#9CBCE2"&gt;

&lt;td&gt;العياط&lt;/td&gt;

&lt;/tr&gt;

&lt;tr&gt;

&lt;td&gt;

&lt;table style="font-family:Arial,Verdana,Times;font-size:12px;text-align:left;width:100%;border-spacing:0px; padding:3px 3px 3px 3px"&gt;

&lt;tr&gt;

&lt;td&gt;SHAPE&lt;/td&gt;

&lt;td&gt;Polyline&lt;/td&gt;

&lt;/tr&gt;

&lt;tr bgcolor="#D4E4F3"&gt;

&lt;td&gt;الاسم&lt;/td&gt;

&lt;td&gt;العياط&lt;/td&gt;

&lt;/tr&gt;

&lt;tr&gt;

&lt;td&gt;SHAPE_Length&lt;/td&gt;

&lt;td&gt;3299.179106&lt;/td&gt;

&lt;/tr&gt;

&lt;/table&gt;

&lt;/td&gt;

&lt;/tr&gt;

&lt;/table&gt;

&lt;/body&gt;

&lt;/html&gt;</description>
            <styleUrl>#LineStyle00</styleUrl>
            <MultiGeometry>
                <LineString>
                    <coordinates>
                        31.22167327537224,29.60699409142521,0 31.21864638138206,29.60718181167419,0 31.21700996113995,29.60744215099063,0 31.21414622689401,29.60878103953701,0 31.21295610437081,29.60959924916077,0 31.20477400640138,29.60788844697299,0 31.20298882177771,29.61257455770906,0 31.19333333292129,29.60888888869802,0 
                    </coordinates>
                </LineString>
            <Point><coordinates>31.21295610437081,29.60959924916077,0</coordinates></Point></MultiGeometry>
        </Placemark>

    </Folder>
</Document>
</kml>

加载KML的JavaScript代码 #

var kml_layer = new google.maps.KmlLayer(src, {
    suppressInfoWindows: true,
    preserveViewport: true,
    map: map
});

原因分析 #

1. KML支持的兼容性差异：Google Maps的KmlLayer与Google Earth对KML标准的实现并非完全一致，前者为了性能和简化，仅支持KML的子集特性，而Google Earth对KML的解析更全面。
2. MultiGeometry的标签渲染规则：当Placemark包含<MultiGeometry>时，Google Maps默认只会渲染几何图形，不会为其中的Point元素自动应用LabelStyle显示标签；但Google Earth会识别MultiGeometry内的独立Point元素，并按照Style配置渲染标签。
3. 复合几何的标签优先级：当Placemark同时包含线和点的复合几何时，Google Maps的标签渲染逻辑会被忽略，仅当Placemark为单独的Point类型时，才会触发LabelStyle的渲染。

解决建议 #

将<MultiGeometry>中的<Point>元素拆分出来，单独创建一个Placemark，并应用相同的<styleUrl>和<name>标签，这样Google Maps会为这个独立的Point渲染标签。示例修改后的KML片段：

<Placemark id="ID_00000">
    <name>العياط</name>
    <styleUrl>#LineStyle00</styleUrl>
    <LineString>
        <coordinates>
            <!-- 原线条坐标 -->
        </coordinates>
    </LineString>
</Placemark>
<Placemark id="ID_00001">
    <name>العياط</name>
    <styleUrl>#LineStyle00</styleUrl>
    <Point>
        <coordinates>31.21295610437081,29.60959924916077,0</coordinates>
    </Point>
</Placemark>

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