PHP8.1.21版本已发布
vue8.1.21版本已发布
jquery8.1.21版本已发布
首页
课程
路径
文章
PHP培训
精品课
下载
最新更新

博客列表 > 谷歌地图多点规划路线

谷歌地图多点规划路线

陈序员的博客
陈序员的博客 原创
2019年09月06日 16:15:14 1185浏览

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
   <title>谷歌地图 v3</title>
   <script src="https://ditu.google.cn/maps/api/js?sensor=true&v=3&language=zh-CN&key=YOU KEY" type="text/javascript"></script>

   <script type="text/javascript">
       var map;// 地图对象
       var directionsService = new google.maps.DirectionsService();
       var directionDisplay;
       var steps = new Array(), curr_step = null, timer = 0, index = 0, marker = null;
       var elapsed = 0;
       var pathlength = 0;
       var win = new google.maps.InfoWindow();
       function init() {
           directionsDisplay = new google.maps.DirectionsRenderer();
           var coor = new google.maps.LatLng(39.960872,116.271486);
           map = new google.maps.Map(document.getElementById("map"), { zoom: 12, center: coor, mapTypeControl: false, mapTypeId: google.maps.MapTypeId.ROADMAP });

           directionsDisplay.setMap(map);

           var request = {
               origin: "39.956728,116.275949",
               destination: "39.959392,116.299424",
               waypoints: [
                   {location:"39.961497,116.284018",stopover:true},
                   {location:"39.966464,116.283417",stopover:true},
                   {location:"39.966925,116.28861",stopover:true},
                   {location:"39.966464,116.283417",stopover:true},
                   {location:"39.961497,116.284018",stopover:false}

               ],
               optimizeWaypoints: true,
               travelMode: google.maps.DirectionsTravelMode.DRIVING
           };

           // 获取从“广州市火车站”到“广州市番禺区汉溪长隆”的线路
           directionsService.route(request, function(response, status) {
               if (status == google.maps.DirectionsStatus.OK) {
                   directionsDisplay.setDirections(response);

                   // 第一种显示里程和时间的框
                   // var legs = response.routes[0].legs;
                   // if (legs) {
                   //     for (var i = 0; i < legs.length; i++) {
                   //         var ss = legs[i].steps;
                   //         for (var j = 0; j < ss.length; j++) {
                   //             steps.push(ss[j]);
                   //         }
                   //     }
                   // }
                   // curr_step = steps.shift();
                   // timer = window.setInterval(function() {
                   //     if (index >= curr_step.path.length) {
                   //         if (steps.length == 0) {
                   //             clearInterval(timer);
                   //             return;
                   //         }
                   //         index = 0;
                   //         curr_step = steps.shift();
                   //         elapsed += curr_step.duration.value;
                   //         pathlength += curr_step.distance.value;
                   //         win.setContent("里程：" + pathlength + "米，耗时：" + elapsed + "秒");
                   //     }
                   //     var point = curr_step.path[index++]
                   //     if (!marker) {
                   //         marker = new google.maps.Marker({ position: point, map: map });
                   //         win.setPosition(point);
                   //         win.open(map);
                   //     } else {
                   //         marker.setPosition(point);
                   //         win.setPosition(point);
                   //     }
                   // }, 30);

                   // 第二种，轨迹回放
                   path = response.routes[0].overview_path;
                   if (path) {
                       timer = window.setInterval(function() {
                           if (!marker) {
                               marker = new google.maps.Marker({ position: path[index++], map: map });
                           } else {
                               if (index < path.length) {
                                   marker.setPosition(path[index++]);
                               } else {
                                   index = 0;
                                   window.clearInterval(timer);
                               }
                           }
                       }, 150);//30是运动时间
                   }
               }
           });
       }
   </script>
</head>
<body onload="init();">
<div id="map" style="width:800px; height:800px;"></div>
</body>
</html>

上一条： 2019-9-05学习作业 下一条： css布局原理与实现-2019年9月4日20时
谷歌地图 Google map，规划路线，添加途经点
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多
热门课程