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+node+mongoDB 火车票H5（四）---完成静态页面

    各项配置都好了,就可以开始写静态页面了,先别急着写,看一下页面又哪些公用的部分可以提取出来的,统一放到components组件文件夹中 header头部文件夹放一些头部常用组件,如首页的banner切 ...

  2. ZOJ 3331 Process the Tasks（双塔DP）

    Process the Tasks Time Limit: 1 Second      Memory Limit: 32768 KB There are two machines A and B. T ...

  3. <2014 04 29> *nix环境编程常用库总结

    -------------------------linux常用头文件如下:POSIX标准定义的头文件<dirent.h>        目录项<fcntl.h>        ...

  4. 我的Android进阶之旅------>解决Android Studio编译后安装apk报错：The APK file does not exist on disk

    1.错误描述 今天用Android Studio编译应用后安装APK的时候,报错了,错误如下所示: The APK file build\outputs\apk\OYP_2.3.4_I2Base_64 ...

  5. 007-shiro与spring web项目整合【一】基础搭建

    一.需求 将原来基于url的工程改成使用shiro实现 二.代码 https://github.com/bjlhx15/shiro.git 中的permission_shiro 三.去除原项目拦截器 ...

  6. C#笔试面试宝典值得收藏

    又是一年换工作纠结的季节,前一阵子由于工作的缘故,薪资降低,加之被其他部门以莫须有的罪名投诉:固然愤慨之,遂升起离职念想,下面是这几天电话面试和笔试中常问到的问题汇总,给大家分享下,不足之处往大神拍砖 ...

  7. 判断json格式中是否含有key

    1.obj["key"] != undefined 这种有缺陷,如果这个key定义了,并且就是很2的赋值为undefined,那么这句就会出问题了. 2.if("key& ...

  8. 使用ansible 完成yum安装lamp环境

    使用ansible 完成yum安装lamp环境 [root@node2 ~]# cd /etc/ansible/playbook/[root@node2 playbook]# lslamp[root@ ...

  9. C#检测两个文件内容是否相同

    不知道为什么对Excel 2010 xlsx后缀的文件没有效果,求解! 对其他文件有效,如.txt,.csv using System; using System.Security.Cryptogra ...

  10. appium server日志分析

    文章出处http://blog.csdn.net/yan1234abcd/article/details/60765295 每次运行测试,可以从Appium Server控制台看到有特别多的日志输出, ...