【发布时间】：2016-01-18 13:29:03
【问题描述】：
我在谷歌地图中有一个保存的地图，并且有一个带有 3 个标记的图层。一个红色，一个蓝色和一个绿色。
我以 kml 和 kmz 格式导出了标记。
然后我在我的网站上创建了一张地图，并按照地图 api v3 中的描述添加了 kml。
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>
结果：
【问题讨论】：
-
您的 KML 是什么样的？ Google Maps JavaScript API won't display markers from KML exported from My Maps 的可能重复项
-
不是重复的。我看不到颜色，但我可以看到标记是白色的。
-
您的 KML 是什么样的。请提供一个 Minimal, Complete, Tested and Readable example 来证明该问题。
-
我在 kml "gstatic.com/mapspro/images/stock/503-wht-blank_maps.png" 中看到了这个我应该为每种样式手动更改吗？有没有办法像我的地图中声明的那样？
标签： javascript google-maps google-maps-api-3