Google Map DirectionService

时间:2017-02-24 12:45:23

标签: javascript google-maps

我试图找到两条路线之间的重叠。为此,我遵循以下链接中接受的答案 -

How to find the overlap of polylines in order to draw the common segment as shaded on google maps

接受的答案表明,即使我删除路线上的航路点,jsfiddle也适用于我。现在我在我的机器上的普通html上尝试相同的代码。这是html代码 -

it

现在我收到一条javascript错误,上面写着

<html>

<head>

 <title>Hello World</title>

       <style>

           body, html, #map {
               width: 100%;
            height: 100%;
            padding: 0;
            margin: 0;
        }
    </style>

    <script src="https://maps.googleapis.com/maps/api/js?v=3"></script>

    <script>

        var map;

        var directionsService;

        var bounds = new google.maps.LatLngBounds();

        var polyline1 = new google.maps.Polyline({
            path: [],
            strokeColor: "#DD71D8",
            strokeWeight: 1
        });
        var polyline2 = new google.maps.Polyline({
            path: [],
            strokeColor: "#0000ff",
            strokeWeight: 1
        });
        var polyline3 = new google.maps.Polyline({
            path: [],
            strokeColor: "#ff0000",
            strokeWeight: 8
        });


        function loadRoute1() {
            var request = {
                origin: new google.maps.LatLng(30.244517, -97.892271),
                destination: new google.maps.LatLng(30.244517, -97.892271),
                waypoints: [{
                    location: new google.maps.LatLng(30.241532, -97.894202)
                }, {
                    location: new google.maps.LatLng(30.240374, -97.891633)
                }, {
                    location: new google.maps.LatLng(30.244220, -97.890442)
                }],
                travelMode: google.maps.TravelMode.DRIVING
            };

            directionsService.route(request, function (result, status) {
                if (status == google.maps.DirectionsStatus.OK) {
                    result.draggable = true;
                    var renderer = new google.maps.DirectionsRenderer({
                        draggable: false, // true,
                        polylineOptions: {
                            strokeColor: "#DD71D8",
                            strokeWeight: 1
                        },
                        map: map
                    });
                    var path = result.routes[0].overview_path;
                    var legs = result.routes[0].legs;
                    for (i = 0; i < legs.length; i++) {
                        var steps = legs[i].steps;
                        for (j = 0; j < steps.length; j++) {
                            var nextSegment = steps[j].path;
                            for (k = 0; k < nextSegment.length; k++) {
                                polyline1.getPath().push(nextSegment[k]);
                                bounds.extend(nextSegment[k]);
                            }
                        }
                    }
                    // polyline1.setMap(map);
                    if (polyline2.getPath().getLength() > 1) {
                        getPolylineIntersection();
                    }
                    renderer.setDirections(result);
                }
            });
        }

        function loadRoute2() {
            var request = {
                origin: new google.maps.LatLng(30.244220, -97.890426),
                destination: new google.maps.LatLng(30.244220, -97.890426),
                waypoints: [{
                    location: new google.maps.LatLng(30.243312, -97.890877)
                }, {
                    location: new google.maps.LatLng(30.242431, -97.891601)
                }, {
                    location: new google.maps.LatLng(30.243145, -97.893156)
                }, {
                    location: new google.maps.LatLng(30.242357, -97.893811)
                }, {
                    location: new google.maps.LatLng(30.241671, -97.891783)
                }],
                travelMode: google.maps.TravelMode.DRIVING
            };


            directionsService.route(request, function (result, status) {
                if (status == google.maps.DirectionsStatus.OK) {
                    result.draggable = true;
                    var renderer = new google.maps.DirectionsRenderer({
                        draggable: false, // true,
                        polylineOptions: {
                            strokeColor: "#0000ff",
                            strokeWeight: 1
                        },
                        map: map
                    });
                    var path = result.routes[0].overview_path;
                    var legs = result.routes[0].legs;
                    for (i = 0; i < legs.length; i++) {
                        var steps = legs[i].steps;
                        for (j = 0; j < steps.length; j++) {
                            var nextSegment = steps[j].path;
                            for (k = 0; k < nextSegment.length; k++) {
                                polyline2.getPath().push(nextSegment[k]);
                                bounds.extend(nextSegment[k]);
                            }
                        }
                    }
                    // polyline2.setMap(map);
                    if (polyline1.getPath().getLength() > 1) {
                        getPolylineIntersection();
                    }
                    renderer.setDirections(result);
                }
            });
        }

        function getPolylineIntersection() {
            var commonPts = [];
            for (var i = 0; i < polyline1.getPath().getLength(); i++) {
                for (var j = 0; j < polyline2.getPath().getLength(); j++) {
                    if (polyline1.getPath().getAt(i).equals(polyline2.getPath().getAt(j))) {
                        commonPts.push({
                            lat: polyline1.getPath().getAt(i).lat(),
                            lng: polyline1.getPath().getAt(i).lng(),
                            route1idx: i
                        });
                    }
                }
            }
            var path = [];
            var prevIdx = commonPts[0].route1idx;
            for (var i = 0; i < commonPts.length; i++) {
                if (commonPts[i].route1idx <= prevIdx + 1) {
                    path.push(commonPts[i]);
                    prevIdx = commonPts[i].route1idx;
                } else {
                    var polyline = new google.maps.Polyline({
                        map: map,
                        path: path,
                        strokeWeight: 8,
                        strokeColor: "#ff0000"
                    });
                    path = [];
                    prevIdx = commonPts[i].route1idx;
                }
            }
            var polyline = new google.maps.Polyline({
                map: map,
                path: path,
                strokeWeight: 8,
                strokeColor: "#ff0000"
            });

        }



        function initialize() {
            alert("Hello");
            var mapOptions = {
                zoom: 16,
                draggable: true,
                center: {
                    lat: 30.241532,
                    lng: -97.894202
                }
            };
            map = new google.maps.Map(document.getElementById('map'), mapOptions);
            directionsService = new google.maps.DirectionsService();

            loadRoute1();
            loadRoute2();

        }

        initialize();

    </script>

</head>
<body>
    <div id="map"></div>
</body>
</html>

有什么建议吗?

1 个答案:

答案 0 :(得分:0)

试试这个,您需要将yourkey替换为文档底部的google api密钥

 <html>

<head>

 <title>Hello World</title>

       <style>

           body, html, #map {
               width: 100%;
            height: 100%;
            padding: 0;
            margin: 0;
        }
    </style>

<script src="https://maps.googleapis.com/maps/api/js?key=YourKey"></script>
</head>
<body>
    <div id="map"></div>

    <script>

        var map;

        var directionsService;

        var bounds = new google.maps.LatLngBounds();

        var polyline1 = new google.maps.Polyline({
            path: [],
            strokeColor: "#DD71D8",
            strokeWeight: 1
        });
        var polyline2 = new google.maps.Polyline({
            path: [],
            strokeColor: "#0000ff",
            strokeWeight: 1
        });
        var polyline3 = new google.maps.Polyline({
            path: [],
            strokeColor: "#ff0000",
            strokeWeight: 8
        });


        function loadRoute1() {
            var request = {
                origin: new google.maps.LatLng(30.244517, -97.892271),
                destination: new google.maps.LatLng(30.244517, -97.892271),
                waypoints: [{
                    location: new google.maps.LatLng(30.241532, -97.894202)
                }, {
                    location: new google.maps.LatLng(30.240374, -97.891633)
                }, {
                    location: new google.maps.LatLng(30.244220, -97.890442)
                }],
                travelMode: google.maps.TravelMode.DRIVING
            };

            directionsService.route(request, function (result, status) {
                if (status == google.maps.DirectionsStatus.OK) {
                    result.draggable = true;
                    var renderer = new google.maps.DirectionsRenderer({
                        draggable: false, // true,
                        polylineOptions: {
                            strokeColor: "#DD71D8",
                            strokeWeight: 1
                        },
                        map: map
                    });
                    var path = result.routes[0].overview_path;
                    var legs = result.routes[0].legs;
                    for (i = 0; i < legs.length; i++) {
                        var steps = legs[i].steps;
                        for (j = 0; j < steps.length; j++) {
                            var nextSegment = steps[j].path;
                            for (k = 0; k < nextSegment.length; k++) {
                                polyline1.getPath().push(nextSegment[k]);
                                bounds.extend(nextSegment[k]);
                            }
                        }
                    }
                     polyline1.setMap(map);
                    if (polyline2.getPath().getLength() > 1) {
                        getPolylineIntersection();
                    }
                    renderer.setDirections(result);
                }
            });
        }

        function loadRoute2() {
            var request = {
                origin: new google.maps.LatLng(30.244220, -97.890426),
                destination: new google.maps.LatLng(30.244220, -97.890426),
                waypoints: [{
                    location: new google.maps.LatLng(30.243312, -97.890877)
                }, {
                    location: new google.maps.LatLng(30.242431, -97.891601)
                }, {
                    location: new google.maps.LatLng(30.243145, -97.893156)
                }, {
                    location: new google.maps.LatLng(30.242357, -97.893811)
                }, {
                    location: new google.maps.LatLng(30.241671, -97.891783)
                }],
                travelMode: google.maps.TravelMode.DRIVING
            };


            directionsService.route(request, function (result, status) {
                if (status == google.maps.DirectionsStatus.OK) {
                    result.draggable = true;
                    var renderer = new google.maps.DirectionsRenderer({
                        draggable: false, // true,
                        polylineOptions: {
                            strokeColor: "#0000ff",
                            strokeWeight: 1
                        },
                        map: map
                    });
                    var path = result.routes[0].overview_path;
                    var legs = result.routes[0].legs;
                    for (i = 0; i < legs.length; i++) {
                        var steps = legs[i].steps;
                        for (j = 0; j < steps.length; j++) {
                            var nextSegment = steps[j].path;
                            for (k = 0; k < nextSegment.length; k++) {
                                polyline2.getPath().push(nextSegment[k]);
                                bounds.extend(nextSegment[k]);
                            }
                        }
                    }
                    polyline2.setMap(map);
                    if (polyline1.getPath().getLength() > 1) {
                        getPolylineIntersection();
                    }
                    renderer.setDirections(result);
                }
            });
        }

        function getPolylineIntersection() {
            var commonPts = [];
            for (var i = 0; i < polyline1.getPath().getLength(); i++) {
                for (var j = 0; j < polyline2.getPath().getLength(); j++) {
                    if (polyline1.getPath().getAt(i).equals(polyline2.getPath().getAt(j))) {
                        commonPts.push({
                            lat: polyline1.getPath().getAt(i).lat(),
                            lng: polyline1.getPath().getAt(i).lng(),
                            route1idx: i
                        });
                    }
                }
            }
            var path = [];
            var prevIdx = commonPts[0].route1idx;
            for (var i = 0; i < commonPts.length; i++) {
                if (commonPts[i].route1idx <= prevIdx + 1) {
                    path.push(commonPts[i]);
                    prevIdx = commonPts[i].route1idx;
                } else {
                    var polyline = new google.maps.Polyline({
                        map: map,
                        path: path,
                        strokeWeight: 8,
                        strokeColor: "#ff0000"
                    });
                    path = [];
                    prevIdx = commonPts[i].route1idx;
                }
            }
            var polyline = new google.maps.Polyline({
                map: map,
                path: path,
                strokeWeight: 8,
                strokeColor: "#ff0000"
            });

        }



        function initialize() {
            var mapOptions = {
                zoom: 16,
                draggable: true,
                center: {
                    lat: 30.241532,
                    lng: -97.894202
                }
            };
            map = new google.maps.Map(document.getElementById('map'), mapOptions);
            directionsService = new google.maps.DirectionsService();

            loadRoute1();
            loadRoute2();

        }
        initialize();
    </script>
</body>
</html>

修改了修补程序