如何获得谷歌地图绘制的路线的精确坐标？

时间：2016-06-08 02:58:44

标签： javascript google-maps google-maps-api-3

我正在为您提供完整的html页面javascript代码，即创建路线图，我点击了谷歌地图绘制的路线，在回复中，我得到路线的坐标，但我的路线坐标和点击事件坐标是不同的。

如何获得与我的点击事件坐标匹配的路线的精确坐标？

因为我在路上检查汽车，我的汽车设备发送给我与点击事件坐标相同。这就是我使用点击事件的原因。

请帮助我，请查看下面的图片文件：

<!DOCTYPE html>
<html>
<head>

    <meta charset="utf-8">
    <title>Check Car On Route </title>
    <style>
        html, body { height: 100%; margin: 0; padding: 0; }
        #map { height: 100%; }
        #panel { position: absolute; top: 10px; left: 25%; z-index: 5; background-color: #fff; padding: 5px; text-align: center; }

        #panel, .panel { font-family: 'Roboto' , 'sans-serif'; line-height: 30px; padding-left: 10px; }

        #panel select, #panel input, .panel select, .panel input { font-size: 15px; }

        #panel select, .panel select { width: 100%; }

        #panel i, .panel i { font-size: 12px; }

        .panel { height: 25%; overflow: auto; right: 0px !important; }

        .adp-placemark, .adp-directions, .adp-legal { display:none }

        .adp-list {     background: #fff;
                        padding: 0px !important;
    font-family: Roboto,Arial,sans-serif;
    font-size: 12px !important;
    font-weight: 700;
    color: #2c2c2c;
    opacity: 0.8; }

    .adp-summary{
                padding: 0px 200px 0px;
    font-size: medium;
    background: white;
    float: left;
    padding-left: 5px;
    margin-left: 1px;
    font-family: Arial;
    font-weight: 600;
    opacity: 0.8;
        }

    .searchBtn2{
         z-index: 0;
    position: absolute;
    left: 88px !important;
    top: 35px !important;
    height: 20px !important;
        }

        .searchBtn1{ z-index: 0; position: absolute; left: 88px !important;
                     top: 10px !important; height: 20px !important;}
    </style>
</head>
<body onload="initMap();">

    <div id="map" style="float: left; width: 100%; height: 100%">
    </div>

    <div id="directionsPanel" class="panel" style="float: right; width: auto; height 100%">
     </div>
        <input id="searchTextField" type="text" size="50" 
            class="searchBtn1"/>
        <input id="searchTextField2" type="text" size="50" 
            class="searchBtn2"/>
        <button id="btn1" onclick="loadSaved()" style="z-index: 0; position: absolute; left: 88px;
            top: 110px; height: 20px; width: 50px;">
            Load
        </button>
        <button id="Button2" onclick="save_waypoints()" style="z-index: 0; position: absolute;
            left: 150px; top: 110px; height: 20px; width: 50px;">
            Save
        </button>
         <button id="Button4" onclick="displayR()" style="z-index: 0; position: absolute;
            left: 88px; top: 70px; height: 20px; width: 50px;">
            Get
        </button>
        <button id="Button3" onclick="ClearAll()" style="z-index: 0; position: absolute;
            left: 150px; top: 70px; height: 20px; width: 50px;">
            Clear
        </button>
         <button id="Button7" onclick="drawpolyMap()" style="z-index: 0; position: absolute;
            left: 150px; top: 70px; height: 20px; width: 50px;">
            Draw
        </button>

    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?v=3.21&libraries=places&sensor=false"></script>
    <script type="text/javascript">

        var directionsService;
        var directionsDisplay;
        var data = {};
        var savedJsonStr;
        var getdrawvalues = [];
        var mapse;
        function ClearAll() {

            directionsDisplay.set('directions', null);
        }

        function initMap() {

            var latlng = new google.maps.LatLng('55.378051', '-3.435973');
            var myOptions = {
                zoom: 6,
                center: latlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var map = new google.maps.Map(document.getElementById('map'), myOptions);


            directionsService = new google.maps.DirectionsService;
            directionsDisplay = new google.maps.DirectionsRenderer({
                draggable: true,
                map: map,
                panel: document.getElementById('directionsPanel')
            });

            directionsDisplay.addListener('directions_changed', function () {
                directionsDisplay.getDirections();
            });


            var input = document.getElementById('searchTextField');
            var input2 = document.getElementById('searchTextField2');
            var dirDiv = document.getElementById('directionsPanel');

            var autocomplete = new google.maps.places.Autocomplete(input);
            var autocomplete2 = new google.maps.places.Autocomplete(input2);

            map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
            map.controls[google.maps.ControlPosition.TOP_LEFT].push(input2);

            map.controls[google.maps.ControlPosition.TOP_RIGHT].push(dirDiv);

        }

        function displayR() {
            displayRoute(
                    document.getElementById("searchTextField").value,
                    document.getElementById("searchTextField2").value,
                    directionsService,
                    directionsDisplay);
        }

        function getDirectionsRoute(e) {
            if (e.keyCode == 13) {

            }
        }

        function displayRoute(origin, destination, service, display) {
            service.route({
                origin: origin,
                destination: destination,
                travelMode: google.maps.TravelMode.DRIVING,
                provideRouteAlternatives: true,
                avoidTolls: true




            }, function (response, status) {
                if (status === google.maps.DirectionsStatus.OK) {

                    var overviewPath = response.routes[1].overview_path,
     overviewPathGeo = [];
                    for (var i = 0; i < overviewPath.length; i++) {
                        overviewPathGeo.push(
        [overviewPath[i].lng(), overviewPath[i].lat()]
    );
                    }


                 //   var distance = 10 / 111.12, // Roughly 10km
//    geoInput = {
//        type: "LineString",
//        coordinates: overviewPathGeo
//    };
                    //                    var arraylength = overviewPathGeo.length;
                    //                    for (var i = 0; i < arraylength; i++) {
                    //                        var getCordinates = overviewPathGeo[i];
                    //                        //Do something
                    //                    }

                    //                    var flightPath = new google.maps.Polyline({
                    //                        path: overviewPathGeo,
                    //                        geodesic: true,
                    //                        strokeColor: '#FF0000',
                    //                        strokeOpacity: 1.0,
                    //                        strokeWeight: 2
                    //                    });

                    //    flightPath.setMap(map);

                    //  shapesAdd(polygon);

                  //  display.setDirections(overviewPath);

                    drawpolyMap(overviewPath);
                }
                else if (!destination || destination == '') {
                    alert('Please enter destination for directions');
                }
                else if (!origin || origin == '') {
                    alert('Please enter origin for directions');
                }
                else {
                    alert('Could not display directions due to: ' + status);
                }
            });
        }

        function save_waypoints() {
            var shapes_JSON;
            var w = [], wp;
            var rleg = directionsDisplay.directions.routes[directionsDisplay.getRouteIndex()].legs[0];

            data.start = { 'lat': rleg.start_location.lat(), 'lng': rleg.start_location.lng() }
            data.end = { 'lat': rleg.end_location.lat(), 'lng': rleg.end_location.lng() }

            var wp = rleg.via_waypoints;

            for (var i = 0; i < wp.length; i++) {
                w[i] = [wp[i].lat(), wp[i].lng()]
                data.waypoints = w;
            }
            savedJsonStr = JSON.stringify(data);
            PageMethods.setOverlays(savedJsonStr, onSaveSuccess); 
//            
        }
        function onSaveSuccess(result) {
            alert(result);
        }
        function loadSaved() {
            var obj = JSON.parse(savedJsonStr);
            setroute(obj);
        }

        function setroute(os) {
            var wp = [];
            if (os.waypoints) {
                for (var i = 0; i < os.waypoints.length; i++)
                    wp[i] = { 'location': new google.maps.LatLng(os.waypoints[i][0], os.waypoints[i][1]), 'stopover': false }
            }

            directionsService.route({ 'origin': new google.maps.LatLng(os.start.lat, os.start.lng),
                'destination': new google.maps.LatLng(os.end.lat, os.end.lng),
                'waypoints': wp,
                'travelMode': google.maps.DirectionsTravelMode.DRIVING
            }, function (res, sts) {
                if (sts == 'OK') directionsDisplay.setDirections(res);
            })
        }



        function drawpolyMap(getdrawvalues) {
             mapse = new google.maps.Map(document.getElementById('map'), {
                zoom: 3,
                center: { lat: 55.378051, lng: -3.435973 },
                mapTypeId: google.maps.MapTypeId.TERRAIN
            });

            google.maps.event.addListener(mapse, "click", function (e) {


                var latStr1 = e.latLng.lat();

                var latStr = latStr1.toFixed(5);

                var LongStr1 = e.latLng.lng();
                var LongStr = LongStr1.toFixed(5);

                for (var i = 0; i < getdrawvalues.length; i++) {


                    var latgAry1 = getdrawvalues[i].lat();
                    var latgAry = latgAry1.toFixed(5);

                    var lngAry1 = getdrawvalues[i].lng();
                    var lngAry = lngAry1.toFixed(5);

                    if (latStr.toString() == latgAry.toString()   && lngAry.toString() == LongStr.toString()) {
                        alert('In Zone');
                        break;


                    }

                }

            });
                //lat and lng is available in e object

//                var marker = new google.maps.Marker({
//                    position: latLng,
                //                    map: mapse


              //  });


          //  var flightPlanCoordinates = getdrawvalues;
//            [
//    { lat: 34.5065566216456, lng: 71.21337890625 },
//    { lat: 33.1007454051442, lng: 69.43359375 }
//  
            //  ];
 var DrawLine = new google.maps.Polyline({
                path: getdrawvalues,
                geodesic: true,
                strokeColor: "#00FF00",
                strokeOpacity: 1.8,
                strokeWeight: 3,
                 map: mapse
//                fillColor: "#000000",
//                fillOpacity: 1.35
            });

            DrawLine.setMap(getdrawvalues);

          //  mapse.setZoom(5);
          //  mapse.setCenter(getdrawvalues);
            var DrawLine2 = new google.maps.Polyline({
                path: getdrawvalues,
                geodesic: true,
                strokeColor: '#FF0000',
                strokeOpacity: 0.3,
                strokeWeight: 15,
                fillColor: "#FF0000",
                fillOpacity: 1.35,
                map: mapse
            });

            DrawLine2.setMap(mapse);
            zoomToObject(getdrawvalues);
        }
        function zoomToObject(obj) {
            var bounds = new google.maps.LatLngBounds();
            var points = obj; //obj.getPath().getArray();
            for (var n = 0; n < obj.length; n++) {
                bounds.extend(points[n]);
            }
            mapse.fitBounds(bounds);
        }


    </script>    

</body>
</html>

1 个答案:

答案 0 :(得分：0)

  1. 坐标是一个非常精确的值（见https://gis.stackexchange.com/questions/8650/how-to-measure-the-accuracy-of-latitude-and-longitude/8674#8674），我认为你不会经常得到完全匹配
  2. 路线是通过顶点定义的，当你的车在两个顶点之间时，你无论如何都不会得到匹配

    3. 可能的解决方案：

    使用google.maps.geometry.poly.isLocationOnEdge方法测试给定坐标是否在路径上（或接近）

相关问题
最新问题