谷歌地图根据条件画轨迹

<!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>
posted on 2015-09-25 11:46 Ivan-v 阅读(1851) 评论(0) 编辑收藏举报