首页 > 其他分享 >Google maps api demo

Google maps api demo

时间:2023-11-06 16:05:48浏览次数:33  
标签:map google relative maps api var Line Google

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>

 



标签:map,google,relative,maps,api,var,Line,Google
From: https://blog.51cto.com/emanlee/8213298

相关文章

  • Google maps api demo 2
     demo/***@fileoverviewSampleshowingcapturingaKMLfileclick*anddisplayingthecontentsinasidepanelinsteadof*anInfoWindow*/varmap;varsrc='https://developers.google.com/maps/tutorials/kml/westcampus.kml';/***......
  • Google maps API
    https://developers.google.com/kml/documentation/kml_tuthttps://developers.google.com/maps/documentation/javascript/examples/layer-kml?hl=zh-cnhttps://developers.google.com/maps/tutorials/kml/https://developers.google.com/maps/support/kmlmapshttps://develo......
  • 配置使用百度地图时出现:APP Referer校验失败。请检查该ak设置的白名单与访问所有的域
    如果是个人内部测试使用,直接将IP白名单设置为*  ......
  • 为何网页上要用Battery电池状态API
    手机自身的电源管理已经相当不错了,那为何网页上还要增加一个HTML5Battery电池状态API呢? 随着HTML5以及CSS3技术支持与发展,以及手机越来越高性能带来的可行性。移动端的页面显然会越来越烧电。例如,流畅的动画效果,模糊阴影等视觉体验。因此可能会出现这样的情况,用户电量快不行了,又......
  • 义乌购API 根据关键词取商品列表
    义乌购API可以根据关键词取商品列表。通过调用义乌购API的item_search接口,传入关键词参数,可以获取到符合该关键词的商品列表。以下是使用义乌购API根据关键词取商品列表的步骤:注册义乌购开发者账号并获取授权码和密钥。在代码中导入义乌购API的SDK,设置请求的URL和请求方法。在请求......
  • Eolink Apikit 版本更新:数据字典功能上线、支持 MongoDB 数据库操作...
    ......
  • 如何使用 Loadgen 来简化 HTTP API 请求的集成测试
    引言在编写HTTP服务的过程中,集成测试[1]是保证程序正确性的重要一环,如下图所示,其基本的流程就是不断向服务发起请求然后校验响应的状态和数据等:为大量的API和用例编写测试是一件繁琐的工作,而Loadgen[2]正是为了简化这一过程而设计的。一个简单的测试假定我们在127.......
  • WebApi入门
    1.怎么理解webapi可以把他看作一个仓库,负责接收货物和出口货物只是一个地址MVC访问展示的是一个页面webapi访问地址是拿到一个数据2.webapi接口地址从何而来新建一个webapi项目,启动这是线程为我们提供的地址请求了这个地址,返回了一串数据https://localhost:5001/W......
  • face-api基于tensorflow 的人像检测npm 包
    face-api基于tensorflow的人像检测npm包,原始项目为justadudewhohacks/face-api.js但是因为缺少维护,社区有人自己fork了一个新的vladmandic/face-api,可以更好的支持tensorflow新版本,当然很不错还可以支持基于wasm的backend(@tensorflow/tfjs-backend-wasm)参考使用demo.......
  • Java系列:Java8 新特性:强大的 Stream API(创建 Stream、中间操作、终止操作)
    Java8中有两大最为重要的改变。第一个是Lambda表达式;另外一个则是StreamAPI。StreamAPI(java.util.stream)把真正的函数式编程风格引入到Java中。这是目前为止对Java类库最好的补充,因为StreamAPI可以极大提供Java程序员的生产力,让程序员写出高效率、干净、简洁的代码。......