Question

我在Google地图中保存了地图，并且有一个包含3个标记的图层。红色，蓝色和绿色。

我以kml和kmz格式导出标记。

然后我在我的网站上创建了一张地图，我添加了kml，如地图api v3中所述。

      function initMap() {
      var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 12,
        center: {lat: 37.06, lng: -95.68}
      });

      var kmlLayer = new google.maps.KmlLayer({
        url: '<i have the url of my kml file here>',
        suppressInfoWindows: true,
        map: map
      });
}

<script async defer
        src="https://maps.googleapis.com/maps/api/js?key=<my api key here>&signed_in=true&callback=initMap">
    </script>

它有效，我可以看到地图上的标记都是白色的。所以问题是它们没有颜色，虽然它是在kml中定义的（如果我用记事本打开kml，我可以看到颜色代码为iconStyle）

如何从保存的谷歌地图中导出标记及其颜色，并使用js api将它们添加到另一个地图中？我不想嵌入整个地图，因为我将自定义样式应用于地图（隐藏的国家/地区名称标签）。

是否可以使用kml或kmz？我应该选择另一种方法吗？

我的KML文件：

<?xml version='1.0' encoding='UTF-8'?>
<kml xmlns='http://www.opengis.net/kml/2.2'>
    <Document>
        <name>Untitled layer</name>
        <Placemark>
            <name>Point 2</name>
            <styleUrl>#icon-503-009D57-nodesc</styleUrl>
            <ExtendedData>
            </ExtendedData>
            <Point>
                <coordinates>22.467041,39.436193,0.0</coordinates>
            </Point>
        </Placemark>
        <Placemark>
            <name>Point 2</name>
            <styleUrl>#icon-503-DB4436-nodesc</styleUrl>
            <ExtendedData>
            </ExtendedData>
            <Point>
                <coordinates>21.9836426,39.1556224,0.0</coordinates>
            </Point>
        </Placemark>
        <Placemark>
            <name>Point 3</name>
            <styleUrl>#icon-503-FAD199-nodesc</styleUrl>
            <ExtendedData>
            </ExtendedData>
            <Point>
                <coordinates>22.7801514,38.5911138,0.0</coordinates>
            </Point>
        </Placemark>
        <Style id='icon-503-009D57-nodesc-normal'>
            <IconStyle>
                <color>ff579D00</color>
                <scale>1.1</scale>
                <Icon>
                    <href>http://www.gstatic.com/mapspro/images/stock/503-wht-blank_maps.png</href>
                </Icon>
                <hotSpot x='16' y='31' xunits='pixels' yunits='insetPixels'>
                </hotSpot>
            </IconStyle>
            <LabelStyle>
                <scale>0.0</scale>
            </LabelStyle>
            <BalloonStyle>
                <text><![CDATA[<h3>$[name]</h3>]]></text>
            </BalloonStyle>
        </Style>
        <Style id='icon-503-009D57-nodesc-highlight'>
            <IconStyle>
                <color>ff579D00</color>
                <scale>1.1</scale>
                <Icon>
                    <href>http://www.gstatic.com/mapspro/images/stock/503-wht-blank_maps.png</href>
                </Icon>
                <hotSpot x='16' y='31' xunits='pixels' yunits='insetPixels'>
                </hotSpot>
            </IconStyle>
            <LabelStyle>
                <scale>1.1</scale>
            </LabelStyle>
            <BalloonStyle>
                <text><![CDATA[<h3>$[name]</h3>]]></text>
            </BalloonStyle>
        </Style>
        <StyleMap id='icon-503-009D57-nodesc'>
            <Pair>
                <key>normal</key>
                <styleUrl>#icon-503-009D57-nodesc-normal</styleUrl>
            </Pair>
            <Pair>
                <key>highlight</key>
                <styleUrl>#icon-503-009D57-nodesc-highlight</styleUrl>
            </Pair>
        </StyleMap>
        <Style id='icon-503-DB4436-nodesc-normal'>
            <IconStyle>
                <color>ff3644DB</color>
                <scale>1.1</scale>
                <Icon>
                    <href>http://www.gstatic.com/mapspro/images/stock/503-wht-blank_maps.png</href>
                </Icon>
                <hotSpot x='16' y='31' xunits='pixels' yunits='insetPixels'>
                </hotSpot>
            </IconStyle>
            <LabelStyle>
                <scale>0.0</scale>
            </LabelStyle>
            <BalloonStyle>
                <text><![CDATA[<h3>$[name]</h3>]]></text>
            </BalloonStyle>
        </Style>
        <Style id='icon-503-DB4436-nodesc-highlight'>
            <IconStyle>
                <color>ff3644DB</color>
                <scale>1.1</scale>
                <Icon>
                    <href>http://www.gstatic.com/mapspro/images/stock/503-wht-blank_maps.png</href>
                </Icon>
                <hotSpot x='16' y='31' xunits='pixels' yunits='insetPixels'>
                </hotSpot>
            </IconStyle>
            <LabelStyle>
                <scale>1.1</scale>
            </LabelStyle>
            <BalloonStyle>
                <text><![CDATA[<h3>$[name]</h3>]]></text>
            </BalloonStyle>
        </Style>
        <StyleMap id='icon-503-DB4436-nodesc'>
            <Pair>
                <key>normal</key>
                <styleUrl>#icon-503-DB4436-nodesc-normal</styleUrl>
            </Pair>
            <Pair>
                <key>highlight</key>
                <styleUrl>#icon-503-DB4436-nodesc-highlight</styleUrl>
            </Pair>
        </StyleMap>
        <Style id='icon-503-FAD199-nodesc-normal'>
            <IconStyle>
                <color>ff99D1FA</color>
                <scale>1.1</scale>
                <Icon>
                    <href>http://www.gstatic.com/mapspro/images/stock/503-wht-blank_maps.png</href>
                </Icon>
                <hotSpot x='16' y='31' xunits='pixels' yunits='insetPixels'>
                </hotSpot>
            </IconStyle>
            <LabelStyle>
                <scale>0.0</scale>
            </LabelStyle>
            <BalloonStyle>
                <text><![CDATA[<h3>$[name]</h3>]]></text>
            </BalloonStyle>
        </Style>
        <Style id='icon-503-FAD199-nodesc-highlight'>
            <IconStyle>
                <color>ff99D1FA</color>
                <scale>1.1</scale>
                <Icon>
                    <href>http://www.gstatic.com/mapspro/images/stock/503-wht-blank_maps.png</href>
                </Icon>
                <hotSpot x='16' y='31' xunits='pixels' yunits='insetPixels'>
                </hotSpot>
            </IconStyle>
            <LabelStyle>
                <scale>1.1</scale>
            </LabelStyle>
            <BalloonStyle>
                <text><![CDATA[<h3>$[name]</h3>]]></text>
            </BalloonStyle>
        </Style>
        <StyleMap id='icon-503-FAD199-nodesc'>
            <Pair>
                <key>normal</key>
                <styleUrl>#icon-503-FAD199-nodesc-normal</styleUrl>
            </Pair>
            <Pair>
                <key>highlight</key>
                <styleUrl>#icon-503-FAD199-nodesc-highlight</styleUrl>
            </Pair>
        </StyleMap>
    </Document>
</kml>

结果：

Answer 1

如果您在我的评论中阅读Dr.Molle对linked possible duplicate/related question的回答：

根据文档<color/> <IconStyle/>根本不支持，将被忽略

将图标更改为彩色图标，例如：

http://maps.google.com/mapfiles/ms/micons/red.png http://maps.google.com/mapfiles/ms/micons/green.png http://maps.google.com/mapfiles/ms/micons/yellow.png

（请注意，它似乎实际上正在为＃34; google托管的图标＆＃34;以及相关的issue中指示的某人提供正确的颜色）

如何导出谷歌地图标记并通过地图API将它们添加到另一个地图？

1 个答案: