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. hdu4045(递推)

    不会斯特林数的只能用递推思想了,结果发现推出来的就是斯特林数... #include <stdio.h> #include <stdlib.h> #include <st ...

  2. iOS 错误提示

    1.CUICatalog: Invalid asset name supplied: , or invalid scale factor: 2.000000 ＝>原因: You are call ...

  3. 爬虫入门【10】Pyspider框架简介及安装说明

    Pyspider是python中的一个很流行的爬虫框架系统,它具有的特点如下: 1.可以在Python环境下写脚本 2.具有WebUI,脚本编辑器,并且有项目管理和任务监视器以及结果查看. 3.支持多 ...

  4. 160715、在web.xml中注册IntrospectorCleanupListener解决Quartz等框架可能产生的内存泄露问题

    增加方式如下:web.xml中加入  <listener>    <listener-class>org.springframework.web.util.Introspect ...

  5. Jmeter--CSV Data Set Config 参数化配置

    博客首页:http://www.cnblogs.com/fqfanqi/ 设置界面如下: Filename:参数文件名,一般是.csv和.txt文件.绝对路径和相对路径都可以,为了便于脚本迁移,建议使 ...

  6. CodeForeces 665C Simple Strings

    C. Simple Strings time limit per test 2 seconds memory limit per test 256 megabytes input standard i ...

  7. delphi xe---intraweb基本介绍

    版本10 seattle 新建intraWeb new->other->Delphi Projecs->IntraWeb->IntraWeb Application wizar ...

  8. 巨蟒python全栈开发-第4天 列表&元组&range

    今日内容大纲 1. 什么是列表 定义: 能装对象的对象 在python中使用[]来描述列表, 内部元素用逗号隔开. 对数据类型没有要求 列表存在索引和切片. 和字符串是一样的. 2. 相关的增删改查操 ...

  9. WebBrowser 控件-说明

    WebBrowser.Document 为活动的文档返回自动化对象,引用 Microsoft HTML Object Library 可查看详细属性和方法 下面的解说假设窗体中有一个名称为 Web1 ...

  10. 微信支付 超时 mysql.event

    $wtime 使用具体timestamp //rand 防推测 $wev = 'ev_gbuy_create_' . trim($winsert_id) . rand(100, 999); $sql ...