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>

Google maps api demo的更多相关文章

  1. Google maps api demo 2

    demo /** * @fileoverview Sample showing capturing a KML file click * and displaying the contents in ...

  2. Google Maps API V3 之绘图库 信息窗口

    Google官方教程: Google 地图 API V3 使用入门 Google 地图 API V3 针对移动设备进行开发 Google 地图 API V3 之事件 Google 地图 API V3 ...

  3. Google Maps API V3 之 图层

    Google官方教程: Google 地图 API V3 使用入门 Google 地图 API V3 针对移动设备进行开发 Google 地图 API V3 之事件 Google 地图 API V3 ...

  4. Google Maps API V3 之 路线服务

    Google官方教程: Google 地图 API V3 使用入门 Google 地图 API V3 针对移动设备进行开发 Google 地图 API V3 之事件 Google 地图 API V3 ...

  5. google maps api申请的问题

    现在已经改由统一的GOOGLE API控制台进行所有GOOGLE API的管理了. 方法是使用Google帐号登入 https://code.google.com/apis/console. 然后在所 ...

  6. Google maps API开发（一）(转)

    一.加载Google maps API <script type="text/javascript" src="http://ditu.google.com/map ...

  7. Google maps API开发（二）(转)

    这一篇主要实现怎么调用Google maps API中的地址解析核心类GClientGeocoder: 主要功能包括地址解析.反向解析.本地搜索.周边搜索等, 我这里主要有两个实例: 实例一.当你搜索 ...

  8. Google Maps API Web Services

    原文:Google Maps API Web Services 摘自:https://developers.google.com/maps/documentation/webservices/ Goo ...

  9. Google maps API开发

    原文:Google maps API开发 Google maps API开发(一) 最近做一个小东西用到google map,突击了一下,收获不小,把自己学习的一些小例子记录下来吧 一.加载Googl ...

随机推荐

  1. [Vue warn]: Missing required prop: "title"

    在写vue项目中,在子组件中通过props传值的时候,在父组件中没有定义的话就会看到类似的报错, 这个意思是calendar这个组件中通过props传递一个title属性给父组件,并且title属性是 ...

  2. 【Python之路】第十四篇--jQuery

    jquery简介 1.jquery是什么       ☛ 参考用法 jQuery由美国人John Resig创建,至今已吸引了来自世界各地的众多 javascript高手加入其team. jQuery ...

  3. python中open函数的使用

    转自:https://www.cnblogs.com/R-ling/p/8412578.html 一.open()的函数原型open(file, mode=‘r', buffering=-1, enc ...

  4. Python菜鸟之路：Django 缓存

    Django中提供了6种缓存方式: 开发调试 内存 文件 数据库 Memcache缓存(python-memcached模块) Memcache缓存(pylibmc模块) 1. 开发调试 # 此为开始 ...

  5. IIS网站部署解决报错

    入坑2次,这次还是得马上总结起来== 部署网站报以上错 检查方法 步骤一:检查部署的网站路径是否正确 步骤二: 检查Internet信息管理器中,应用程序池的.net Framework版本,选择v4 ...

  6. Shell下syntax error: operand expected (error token is “-”)

    在这个监控实时网口速率的脚本中,第21,22行存在错误: #!/bin/bash #Modified by lifei4@datangmobile.cn echo ===DTmobile NetSpe ...

  7. Leetcode 之 Exclusive Time of Functions

    636. Exclusive Time of Functions 1.Problem Given the running logs of n functions that are executed i ...

  8. Kotlin开发Android笔记

    外国人写的一个天气预报的例子,最后有源码下载地址,初学者可以研读一下 http://blog.csdn.net/true100/article/category/6257988 1:Kotlin介绍及 ...

  9. JVM虚拟机—JVM的垃圾回收机制（转载）

    1.前言 理解JVM的垃圾回收机制(简称GC)有什么好处呢?作为一名软件开发者,满足自己的好奇心将是一个很好的理由,不过更重要的是,理解GC工作机制可以帮助你写出更好的Java程序. 在学习GC前,你 ...

  10. (转) latch 入门

    原链接:http://www.itpub.net/thread-1424719-1-1.html (入门1)一直想点文章关于Latch的,又一直没写,一是因为懒,二是一直觉得现在关于Latch的书那么 ...