demo:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>KML Layers</title>
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
<script>
function initialize() {
var chicago = new google.maps.LatLng(41.875696,-87.624207);
var mapOptions = {
zoom: 11,
center: chicago
}
var map = new google.maps.Map(document.getElementById(‘map-canvas‘), mapOptions);
var ctaLayer = new google.maps.KmlLayer({
url: ‘http://gmaps-samples.googlecode.com/svn/trunk/ggeoxml/cta.kml‘
});
ctaLayer.setMap(map);
}
google.maps.event.addDomListener(window, ‘load‘, initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
cta.kml
<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://earth.google.com/kml/2.1">
<!-- Data derived from:
Ed Knittel - || tastypopsicle.com
Feel free to use this file for your own purposes.
Just leave the comments and credits when doing so.
-->
<Document>
<name>Chicago Transit Map</name>
<description>Chicago Transit Authority train lines</description>
<Style id="blueLine">
<LineStyle>
<color>ffff0000</color>
<width>4</width>
</LineStyle>
</Style>
<Style id="redLine">
<LineStyle>
<color>ff0000ff</color>
<width>4</width>
</LineStyle>
</Style>
<Style id="greenLine">
<LineStyle>
<color>ff009900</color>
<width>4</width>
</LineStyle>
</Style>
<Style id="orangeLine">
<LineStyle>
<color>ff00ccff</color>
<width>4</width>
</LineStyle>
</Style>
<Style id="pinkLine">
<LineStyle>
<color>ffff33ff</color>
<width>4</width>
</LineStyle>
</Style>
<Style id="brownLine">
<LineStyle>
<color>ff66a1cc</color>
<width>4</width>
</LineStyle>
</Style>
<Style id="purpleLine">
<LineStyle>
<color>ffcc00cc</color>
<width>4</width>
</LineStyle>
</Style>
<Style id="yellowLine">
<LineStyle>
<color>ff61f2f2</color>
<width>4</width>
</LineStyle>
</Style>
<Placemark>
<name>Blue Line</name>
<styleUrl>#blueLine</styleUrl>
<LineString>
<altitudeMode>relative</altitudeMode>
<coordinates>
-87.89289951324463,41.97881025520548,0
-87.89184808731079,41.97788506340239,0
-87.89150476455688,41.97762983571196,0
-87.8912901878357,41.97750222148314,0
-87.73756206035614,41.8521016001764,0
-87.73778736591339,41.85206164224564,0
-87.73803412914276,41.85206164224564,0
-87.74552285671234,41.85189381866398,0
-87.7565735578537,41.85182988575514,0
</coordinates>
</LineString>
</Placemark>
<Placemark>
<name>Red Line</name>
<styleUrl>#redLine</styleUrl>
<LineString>
<altitudeMode>relative</altitudeMode>
<coordinates>
-87.67283499240875,42.019110918045044,0
-87.66907453536987,42.01585473134908,0
-87.66744375228882,42.014483688722116,0
-87.66716480255127,42.014228607763144,0
-87.626058,41.750851,0
-87.625870,41.736142,0
-87.625259,41.721877,0
</coordinates>
</LineString>
</Placemark>
<Placemark>
<name>Green Line</name>
<styleUrl>#greenLine</styleUrl>
<LineString>
<altitudeMode>relative</altitudeMode>
<coordinates>
-87.8049498796463,41.8868887424469,0
-87.79437124729156,41.88703894615173,0
-87.78372824192047,41.88716769218445,0
-87.77429759502411,41.88731789588928,0
-87.75661647319794,41.88741445541382,0
-87.64607191085815,41.77918195724487,0
-87.64630794525146,41.77923560142517,0
-87.664416,41.778970,0
</coordinates>
</LineString>
</Placemark>
<Placemark>
<name>Orange Line</name>
<styleUrl>#orangeLine</styleUrl>
<LineString>
<altitudeMode>relative</altitudeMode>
<coordinates>
-87.73805022239685,41.78673505783081,0
-87.73810386657715,41.79256081581116,0
-87.72440314292908,41.79991006851196,0
-87.71584153175354,41.80354714393616,0
-87.6268458366394,41.87411069869995,0
-87.62665271759033,41.86731934547424,0
</coordinates>
</LineString>
</Placemark>
<Placemark>
<name>Pink Line</name>
<styleUrl>#pinkLine</styleUrl>
<LineString>
<altitudeMode>relative</altitudeMode>
<coordinates>
-87.6339054107666,41.88586950302124,0
-87.633890,41.883259,0
-87.633885,41.879289,0
-87.63370156288147,41.87709331512451,0
-87.63366937637329,41.876996755599976,0
-87.63359427452087,41.87693238258362,0
-87.63347625732422,41.87690019607544,0
-87.62633085250854,41.876975297927856,0
-87.73803412914276,41.85206164224564,0
-87.74552285671234,41.85189381866398,0
-87.7565735578537,41.85182988575514,0
</coordinates>
</LineString>
</Placemark>
<Placemark>
<name>Brown Line</name>
<styleUrl>#brownLine</styleUrl>
<LineString>
<altitudeMode>relative</altitudeMode>
<coordinates>
-87.71307349205017,41.96800221934201,0
-87.71303057670593,41.96639082739174,0
-87.71301984786987,41.96627914525123,0
-87.63107299804688,41.885762214660645,0
-87.6339054107666,41.88586950302124,0
-87.634110,41.888634,0
</coordinates>
</LineString>
</Placemark>
<Placemark>
<name>Purple Line</name>
<styleUrl>#purpleLine</styleUrl>
<LineString>
<altitudeMode>relative</altitudeMode>
<coordinates>
-87.69055902957916,42.072787284851074,0
-87.68584907054901,42.06420421600342,0
-87.633885,41.879289,0
-87.633890,41.883259,0
-87.6339054107666,41.88586950302124,0
-87.634110,41.888634,0
</coordinates>
</LineString>
</Placemark>
<Placemark>
<name>Yellow Line</name>
<styleUrl>#yellowLine</styleUrl>
<LineString>
<altitudeMode>relative</altitudeMode>
<coordinates>
-87.75250,42.04049,0
-87.74726629257202,42.02620267868042,0
-87.74621486663818,42.0246148109436,0
-87.6747179031372,42.02038764953613,0
-87.67283499240875,42.019110918045044,0
</coordinates>
</LineString>
</Placemark>
</Document>
</kml>
时间： 2024-10-13 20:19:23