码迷,mamicode.com
首页 > 其他好文 > 详细

谷歌地图根据条件画轨迹

时间:2015-09-25 12:48:54      阅读:164      评论:0      收藏:0      [点我收藏+]

标签:

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="Scripts/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="http://ditu.google.cn/maps/api/js?v=3.exp&sensor=true&language=cn&libraries=weather,places "></script>
<script type="text/javascript">
    var map;// 地图对象
    var directionsService = new google.maps.DirectionsService();
    var directionDisplay;
    var path = null, timer = 0, index = 0, marker = null;
    function init() {
        directionsDisplay = new google.maps.DirectionsRenderer();
        var coor = new google.maps.LatLng(0, 0);
        map = new google.maps.Map(document.getElementById("map"), { zoom: 14, center: coor, mapTypeControl: false, mapTypeId: google.maps.MapTypeId.ROADMAP });

        directionsDisplay.setMap(map);

        var request = {
            origin: "广州白云国际机场",
            destination: "深圳湾公园",
            optimizeWaypoints: true,
            travelMode: google.maps.DirectionsTravelMode.DRIVING
        };

        // 获取从“广州白云国际机场”到“深圳湾公园”的线路
        directionsService.route(request, function (response, status) {
            if (status == google.maps.DirectionsStatus.OK) {
                directionsDisplay.setDirections(response);
                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);
                            }
                        }
                    }, 30);
                }
            }
        });
    }
    </script>
</head>
<body onload="init()">
    <div id="map" style="width:800px; height:800px;"></div>
</body>
</html>

  

谷歌地图根据条件画轨迹

标签:

原文地址:http://www.cnblogs.com/Ivan-v/p/4837737.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!