demo:

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
  5.     <meta charset="utf-8">
  6.     <title>KML Layers</title>
  7.     <style>
  8.       html, body, #map-canvas {
  9.         height: 100%;
  10.         margin: 0px;
  11.         padding: 0px
  12.       }
  13.     </style>
  14.     <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
  15.     <script>
  16. function initialize() {
  17.   var chicago = new google.maps.LatLng(41.875696,-87.624207);
  18.   var mapOptions = {
  19.     zoom: 11,
  20.     center: chicago
  21.   }
  22.  
  23.   var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
  24.  
  25.   var ctaLayer = new google.maps.KmlLayer({
  26.     url: 'http://gmaps-samples.googlecode.com/svn/trunk/ggeoxml/cta.kml'
  27.   });
  28.   ctaLayer.setMap(map);
  29. }
  30.  
  31. google.maps.event.addDomListener(window, 'load', initialize);
  32.  
  33.     </script>
  34.   </head>
  35.   <body>
  36.     <div id="map-canvas"></div>
  37.   </body>
  38. </html>

cta.kml

  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <kml xmlns="http://earth.google.com/kml/2.1">
  3. <!-- Data derived from:
  4.        Ed Knittel - || tastypopsicle.com
  5.        Feel free to use this file for your own purposes.
  6.        Just leave the comments and credits when doing so.
  7. -->
  8.   <Document>
  9.     <name>Chicago Transit Map</name>
  10.     <description>Chicago Transit Authority train lines</description>
  11.  
  12.     <Style id="blueLine">
  13.       <LineStyle>
  14.         <color>ffff0000</color>
  15.         <width>4</width>
  16.       </LineStyle>
  17.     </Style>
  18.     <Style id="redLine">
  19.       <LineStyle>
  20.         <color>ff0000ff</color>
  21.         <width>4</width>
  22.       </LineStyle>
  23.     </Style>
  24.     <Style id="greenLine">
  25.       <LineStyle>
  26.         <color>ff009900</color>
  27.         <width>4</width>
  28.       </LineStyle>
  29.     </Style>
  30.     <Style id="orangeLine">
  31.       <LineStyle>
  32.         <color>ff00ccff</color>
  33.         <width>4</width>
  34.       </LineStyle>
  35.     </Style>
  36.     <Style id="pinkLine">
  37.       <LineStyle>
  38.         <color>ffff33ff</color>
  39.         <width>4</width>
  40.       </LineStyle>
  41.     </Style>
  42.     <Style id="brownLine">
  43.       <LineStyle>
  44.         <color>ff66a1cc</color>
  45.         <width>4</width>
  46.       </LineStyle>
  47.     </Style>
  48.     <Style id="purpleLine">
  49.       <LineStyle>
  50.         <color>ffcc00cc</color>
  51.         <width>4</width>
  52.       </LineStyle>
  53.     </Style>
  54.     <Style id="yellowLine">
  55.       <LineStyle>
  56.         <color>ff61f2f2</color>
  57.         <width>4</width>
  58.       </LineStyle>
  59.     </Style>
  60.  
  61.     <Placemark>
  62.       <name>Blue Line</name>
  63.       <styleUrl>#blueLine</styleUrl>
  64.       <LineString>
  65.         <altitudeMode>relative</altitudeMode>
  66.         <coordinates>
  67. -87.89289951324463,41.97881025520548,0
  68. -87.89184808731079,41.97788506340239,0
  69. -87.89150476455688,41.97762983571196,0
  70. -87.8912901878357,41.97750222148314,0
  71. -87.73756206035614,41.8521016001764,0
  72. -87.73778736591339,41.85206164224564,0
  73. -87.73803412914276,41.85206164224564,0
  74. -87.74552285671234,41.85189381866398,0
  75. -87.7565735578537,41.85182988575514,0
  76.         </coordinates>
  77.       </LineString>
  78.     </Placemark>
  79.  
  80.     <Placemark>
  81.       <name>Red Line</name>
  82.       <styleUrl>#redLine</styleUrl>
  83.       <LineString>
  84.         <altitudeMode>relative</altitudeMode>
  85.         <coordinates>
  86. -87.67283499240875,42.019110918045044,0
  87. -87.66907453536987,42.01585473134908,0
  88. -87.66744375228882,42.014483688722116,0
  89. -87.66716480255127,42.014228607763144,0
  90. -87.626058,41.750851,0
  91. -87.625870,41.736142,0
  92. -87.625259,41.721877,0
  93.         </coordinates>
  94.       </LineString>
  95.     </Placemark>
  96.  
  97.     <Placemark>
  98.       <name>Green Line</name>
  99.       <styleUrl>#greenLine</styleUrl>
  100.       <LineString>
  101.         <altitudeMode>relative</altitudeMode>
  102.         <coordinates>
  103. -87.8049498796463,41.8868887424469,0
  104. -87.79437124729156,41.88703894615173,0
  105. -87.78372824192047,41.88716769218445,0
  106. -87.77429759502411,41.88731789588928,0
  107. -87.75661647319794,41.88741445541382,0
  108. -87.64607191085815,41.77918195724487,0
  109. -87.64630794525146,41.77923560142517,0
  110. -87.664416,41.778970,0
  111.         </coordinates>
  112.       </LineString>
  113.     </Placemark>
  114.  
  115.     <Placemark>
  116.       <name>Orange Line</name>
  117.       <styleUrl>#orangeLine</styleUrl>
  118.       <LineString>
  119.         <altitudeMode>relative</altitudeMode>
  120.         <coordinates>
  121. -87.73805022239685,41.78673505783081,0
  122. -87.73810386657715,41.79256081581116,0
  123. -87.72440314292908,41.79991006851196,0
  124. -87.71584153175354,41.80354714393616,0
  125. -87.6268458366394,41.87411069869995,0
  126. -87.62665271759033,41.86731934547424,0
  127.         </coordinates>
  128.       </LineString>
  129.     </Placemark>
  130.  
  131.     <Placemark>
  132.       <name>Pink Line</name>
  133.       <styleUrl>#pinkLine</styleUrl>
  134.       <LineString>
  135.         <altitudeMode>relative</altitudeMode>
  136.         <coordinates>
  137. -87.6339054107666,41.88586950302124,0
  138. -87.633890,41.883259,0
  139. -87.633885,41.879289,0
  140. -87.63370156288147,41.87709331512451,0
  141. -87.63366937637329,41.876996755599976,0
  142. -87.63359427452087,41.87693238258362,0
  143. -87.63347625732422,41.87690019607544,0
  144. -87.62633085250854,41.876975297927856,0
  145. -87.73803412914276,41.85206164224564,0
  146. -87.74552285671234,41.85189381866398,0
  147. -87.7565735578537,41.85182988575514,0
  148.         </coordinates>
  149.       </LineString>
  150.     </Placemark>
  151.  
  152.     <Placemark>
  153.       <name>Brown Line</name>
  154.       <styleUrl>#brownLine</styleUrl>
  155.       <LineString>
  156.         <altitudeMode>relative</altitudeMode>
  157.         <coordinates>
  158. -87.71307349205017,41.96800221934201,0
  159. -87.71303057670593,41.96639082739174,0
  160. -87.71301984786987,41.96627914525123,0
  161. -87.63107299804688,41.885762214660645,0
  162. -87.6339054107666,41.88586950302124,0
  163. -87.634110,41.888634,0
  164.         </coordinates>
  165.       </LineString>
  166.     </Placemark>
  167.  
  168.     <Placemark>
  169.       <name>Purple Line</name>
  170.       <styleUrl>#purpleLine</styleUrl>
  171.       <LineString>
  172.         <altitudeMode>relative</altitudeMode>
  173.         <coordinates>
  174. -87.69055902957916,42.072787284851074,0
  175. -87.68584907054901,42.06420421600342,0
  176. -87.633885,41.879289,0
  177. -87.633890,41.883259,0
  178. -87.6339054107666,41.88586950302124,0
  179. -87.634110,41.888634,0
  180.         </coordinates>
  181.       </LineString>
  182.     </Placemark>
  183.  
  184.     <Placemark>
  185.       <name>Yellow Line</name>
  186.       <styleUrl>#yellowLine</styleUrl>
  187.       <LineString>
  188.         <altitudeMode>relative</altitudeMode>
  189.         <coordinates>
  190. -87.75250,42.04049,0
  191. -87.74726629257202,42.02620267868042,0
  192. -87.74621486663818,42.0246148109436,0
  193. -87.6747179031372,42.02038764953613,0
  194. -87.67283499240875,42.019110918045044,0
  195.         </coordinates>
  196.       </LineString>
  197.     </Placemark>
  198.  
  199.   </Document>
  200. </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. 获取系统DPI

    public partial class Form1 : Form     { public Form1()         { InitializeComponent();              ...

  2. Office Developer Tools for Visual Studio 2012现在可用了

    [原文发表地址]   Now Available: Office Developer Tools for Visual Studio 2012 正如我以前写过的,我们正在为构建下一代Office和 S ...

  3. 63、具有过渡动画效果的布局Layout

    下面,下来看一个Demo的效果,代码如下: <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android ...

  4. STL中的容器

    STL中的容器 一. 种类: 标准STL序列容器:vector.string.deque和list. 标准STL关联容器:set.multiset.map和multimap. 非标准序列容器slist ...

  5. 利用wireshark抓取远程linux上的数据包

    原文发表在我的博客主页,转载请注明出处. 前言 因为出差,前后准备总结了一周多,所以博客有所搁置.出差真是累人的活计,不过确实可以学习到很多东西,跟着老板学习做人,学习交流的技巧.入正题~ wires ...

  6. wireshark抓取OpenFlow数据包

    在写SDN控制器应用或者改写控制器源码的时候,经常需要抓包,验证网络功能,以及流表的执行结果等等,wireshark是个很好的抓包分析包的网络工具,下面简介如何用wireshark软件抓取OpenFl ...

  7. spring定时器的cronexpression表达式

    转自:https://www.cnblogs.com/yaowen/p/3779284.html 相关配置: import com.alibaba.dubbo.config.annotation.Se ...

  8. 转义字符的理解（JAVA、字符串和正则表达式）

    一.原理总结: 要理解转义,首先要从正则表达式说起. 在正则表达式中:*和\是特殊字符:为了匹配这两个字符本身,正则表达式中需要写为\*和\\ 在Java中,只能用字符串表示正则表达式,所以需要把\* ...

  9. Java 之网络编程

    网络模型 OSI 模型, 把网络通信的工作分为七层. TCP/IP 模型, 把网络通信的工作分为四层 应用层 传输层 网际层 主机至网络层 网络通信要素 (java.net 包) - IP 地址 (I ...

  10. Java中堆内存与栈内存分配浅析

    Java把内存划分成两种:一种是栈内存,另一种是堆内存.在函数中定义的一些基本类型的变量和对象的引用变量都是在函数的栈内存中分配,当在一段代码块定义一个变量时,Java就在栈中为这个变量分配内存空间, ...