javascript利用谷歌地图开发路线图示例

责任:葡京娱乐场.0267 栏目: 编程语言 发布于: 2014-05-11 07:36:49

感谢您百忙之中阅读本站文章,这里是葡京娱乐场.娱乐官方网,可以关注我们的文章公众号葡京娱乐场.pj32698,以下是文章内容,请注意用眼疲劳。

javascript利用谷歌地图开发路线图示例,效果如下:

页面代码如下:

<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps JavaScript API v3 Example: Directions Complex</title>
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/standard.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
  var directionDisplay;
  var directionsService = new google.maps.DirectionsService();
  var map;

  function initialize() {
    directionsDisplay = new google.maps.DirectionsRenderer();
    var chicago = new google.maps.LatLng(41.850033, -87.6500523);
    var myOptions = {
      zoom:7,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      center: chicago
    }
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    directionsDisplay.setMap(map);
    directionsDisplay.setPanel(document.getElementById("directionsPanel"));
  }
  
  function calcRoute() {
    var start = document.getElementById("start").value;
    var end = document.getElementById("end").value;
    var request = {
        origin:start, 
        destination:end,
        travelMode: google.maps.DirectionsTravelMode.DRIVING
    };
    directionsService.route(request, function(response, status) {
      if (status == google.maps.DirectionsStatus.OK) {
        directionsDisplay.setDirections(response);
      }
    });
  }
</script>
</head>
<body onload="initialize()">
<div>
<b>Start: </b>
<select id="start" onchange="calcRoute();">
  <option value="河南省南阳市">河南省南阳市</option>
  <option value="河南省南阳市南阳理工学院">河南省南阳市南阳理工学院</option>
  <option value="南阳不孕不育症医院">南阳不孕不育症医院</option>
  <option value="st louis, mo">St Louis</option>
  <option value="joplin, mo">Joplin, MO</option>
  <option value="oklahoma city, ok">Oklahoma City</option>
  <option value="amarillo, tx">Amarillo</option>
  <option value="gallup, nm">Gallup, NM</option>
  <option value="flagstaff, az">Flagstaff, AZ</option>
  <option value="winona, az">Winona</option>
  <option value="kingman, az">Kingman</option>
  <option value="barstow, ca">Barstow</option>
  <option value="san bernardino, ca">San Bernardino</option>
  <option value="los angeles, ca">Los Angeles</option>
</select>
<b>End: </b>
<select id="end" onchange="calcRoute();">
  <option value="河南省信阳市">河南省信阳市</option>
  <option value="河南省南阳市南阳火车站">河南省南阳市南阳火车站</option>
  <option value="南阳医专南阳师院">南阳医专南阳师院</option>
  <option value="st louis, mo">St Louis</option>
  <option value="joplin, mo">Joplin, MO</option>
  <option value="oklahoma city, ok">Oklahoma City</option>
  <option value="amarillo, tx">Amarillo</option>
  <option value="gallup, nm">Gallup, NM</option>
  <option value="flagstaff, az">Flagstaff, AZ</option>
  <option value="winona, az">Winona</option>
  <option value="kingman, az">Kingman</option>
  <option value="河南省信阳市">河南省信阳市</option>
  <option value="barstow, ca">Barstow</option>
  <option value="san bernardino, ca">San Bernardino</option>
  <option value="los angeles, ca">Los Angeles</option>
</select>
</div>
<div id="map_canvas" style="float:left;width:70%; height:100%"></div>
<div id="directionsPanel" style="float:right;width:30%;height 100%"></div>
</body>
</html>

您可能感兴趣的文章

  • 谷歌地图开发API教程地址
  • js判断图片是否加载完成并获取图片的宽度
  • php利用curl实现多线程的类,php curl多线程下载图片
  • 经常用到的正则表达式整理
  • php利用正则过滤各种标签,空格,换行符的代码
  • 如何通过jquery控制用户上传的过宽的图片的显示
  • 使用谷歌加载jquery库文件会更好
  • 利用js禁止浏览器直接选择复制文章内容的办法
本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。
转载请注明:文章转载自 [http://www.danrojas.com]
本文标题:javascript利用谷歌地图开发路线图示例
IT技术书籍推荐:
细说PHP(精要版)
细说PHP(精要版)
高洛峰 (作者), LAMP兄弟连 (编者)
PHP是开发Web应用系统最理想的工具,拥有易于使用、功能强大、成本低廉、安全性高、开发速度快且执行灵活等优点。《细说PHP(第2版)》自出版以来,销售一路在同类书籍中领先,已成为PHP学习者首选的工具书。为了可以让读者携带方便及更精准地掌握PHP的重点、要点,同时能使之作为大学计算机系PHP教材普及,特别推出《细说PHP精要版》。本书是以《细说PHP(第2版)》为基础,提取出精华内容,都是PHP开发中必须需要掌握的技术点。全书以实用为目标设计,包含PHP开发中必备的各项技术,对已列出的每一个知识点都进行了深入详细的讲解,并附有大量的经典实例代码,图文并茂,并且侧重介绍了PHP的相关技术在实际Web开发中的应用。
葡京娱乐场.最新互联网资讯
葡京娱乐场.互联网资讯

葡京娱乐场_进入葡京娱乐场.pj32698官方网站.0267