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. python中的str()与eval函数

    author:headsen chen   date:2018-04-09   10:48:22 eval函数是把str转化成list.dict.tuple str函数把list,dict,tuple ...

  2. 4.php奇葩的地方，反引号``

    今天我发现我从来没打过这外符号 ` 就是键盘的左上方, 1的左边不需要组合键, 直接按下即可.... 刚开始我还一直在找没找到.....百度一下.才知道

  3. Jconsole监控tomcat 的JVM内存的设置

    主要参考这位仁兄的文章  http://elf8848.iteye.com/blog/471676 照做后发现还是不行,原来是Linux服务器配置了多块网卡,在设置 Djava.rmi.server. ...

  4. netstat命令——网络，进程，内存

    netstat网络.进程.内存 转自:https://www.cnblogs.com/xieshengsen/p/6618993.html https://zhidao.baidu.com/quest ...

  5. JavaEE中为什么出现中文乱码？

    1.原因 客户端通过IE提交时用的默认编码是UTF-8,而当我们用Myeclipse的时候的服务端接受的时候用的是iso-8859-1 2.解决方法 服务端也用UTF-8编码 byte[] resul ...

  6. Pantone色卡——安全装备的面板、丝印及铭牌颜色设计参考

    可以参考上传文件<Pantone色卡电子版下载>

  7. CentOS7编译安装MariaDB

    一.环境信息: 操作系统版本:CentOS Linux release 7.3.1611 (Core) 内核版本:3.10.0-514.el7.x86_64 MariaDB版本:mariadb-10. ...

  8. ［Mysql ］TIME ZONE

    mysql的时间相关的类型如下: 1. timestamp 时区敏感的 2. date 非时区敏感 3. datetime   非时区敏感 4. time 非时区敏感

  9. Ubuntu学习笔记1-基本部分

    Vim相当于vi的升级版 Find p*.txt支持查找通配符 Echo 回显命令 echo hello  >1.txt  追加命令,不覆盖 echo hello  >1.txt  覆盖命 ...

  10. ruby项目文件上传功能实现

    这里我将从视图.控制器各个层面进行讲解. rails 提供了文件上传功能,可以直接进行下面的编码 <%= form_for :document, :html =>{:multipart = ...