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. Mycat安装及测试分片总结

    1.安装jdk1.72.连接实际mysql数据库 用命令行工具或图形化客户端,连接mysql,创建DEMO所用三个分片数据库:(默认schema.xml中的配置需要三个库) CREATE databa ...

  2. 【BZOJ4388】JOI2012 invitation 堆+线段树+并查集（模拟Prim）

    [BZOJ4388]JOI2012 invitation Description 澳洲猴举办了一场宴会,他想要邀请A个男生和B个女生参加,这A个男生从1到A编号,女生也从1到B编号.现在澳洲猴知道n组 ...

  3. activeMQ "HelloWorld"实现

    本文主要介绍activeMQ在应用程序中是如何使用的,同个两个实例进行说明,这两个实例分别针对P2P模式和Pub/Sub模式. 开发环境 操作系统:Ubuntu 16.10 开发平台:Eclipse  ...

  4. Plist文件介绍

    开发IOS遇到数据,这里专门做frame sprite数据说明 plist plist是property list的缩写.plist中包括一些命名值和使用Core  Foundation类型创建的值的 ...

  5. 向spider中传递参数

    1.这里采用run.py脚本方式 # 通过CrawlerProcess同时运行几个spider import scrapy from scrapy.crawler import CrawlerProc ...

  6. Scala学习之For、Function、Lazy(4)

    1.for的使用 for的使用在各种编程语言中是最常见的,这里只是聊聊for在Scala中的表现形式,由于Scala语言是完全面向对象的,所以直接导致for的不同呈现,下面举几个例子说明一下 obje ...

  7. npm的本地模式与全局模式

    关于npm的本地模式和全局模式的总结: npm install命令就是采用本地模式,即把包安装到当前目录的node_modules子目录下:npm [install/i] [package_name] ...

  8. 3*0.1 == 0.3 将会返回什么？true 还是 false？

    false,因为有些浮点数不能完全精确的表示出来 public static void main(String[] args) { System.out.println(3 * 0.1); Syste ...

  9. 初识python（二）

    初识python(二) 1.变量 变量:把程序运行的中间结果临时的存在内存里,以便后续的代码调用. 1.1 声明变量: #!/usr/bin/env python # -*- coding: utf- ...

  10. python线程池应用场景-爬虫

    import requests from bs4 import BeautifulSoup from concurrent.futures import ThreadPoolExecutor, Pro ...