@evgen9586
Backend-dev. Лублу Enterprise и не люблю понты)

Как определить какая метка на Gmaps ближе?

При инициализации карты ставится метка с моим местоположением и допустим ещё 6 меток в разных местах.
Как написать так , чтобы само определяло какая метка ближе и срабатывала функция построения кратчайшего пути.
Javascript
$(document).ready(function(){
    function myplace()
    {
        if(navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(function(position) {
                geocoding(position.coords.latitude, position.coords.longitude);
            });
        } else
        {
            alert("Geolocation API не поддерживается в вашем браузере");
        }
    }

    function geocoding(lat, lon)
    {
        var my_adress;
        var api_key = 'AIzaSyAsuS1MqzRBzRv1HRrfrlyoMRlkrVXEx0g';
        var cordinats = [lat,  lon];
        var loctype = 'ROOFTOP';
        var restype = 'street_address';
        var position = cordinats.join(",");
        var data = {latlng: position, location_type: loctype, result_type: restype, key: api_key};
        $.ajax({
            method: "GET",
            url: "https://maps.googleapis.com/maps/api/geocode/json",
            data: data,
            dataType: 'json',
            success: function (result) {
                console.log(result)
                my_adress = result.results[0].formatted_address;
                alert("Вы здесь" + " " + "<" + " " + my_adress + " " + ">");
                /-----------------------GMaps Initialization-------------------------------/
                function initMap() {
                    var latlng = new google.maps.LatLng(lat, lon);
                    var mapOptions = {

                        center: latlng,
                        zoom: 14,
                        mapTypeControl: false,
                        streetViewControl: false,
                        styles: [{"featureType":"water","stylers":[{"saturation":43},{"lightness":-11},{"hue":"#0088ff"}]},{"featureType":"road","elementType":"geometry.fill","stylers":[{"hue":"#ff0000"},{"saturation":-100},{"lightness":99}]},{"featureType":"road","elementType":"geometry.stroke","stylers":[{"color":"#808080"},{"lightness":54}]},{"featureType":"landscape.man_made","elementType":"geometry.fill","stylers":[{"color":"#ece2d9"}]},{"featureType":"poi.park","elementType":"geometry.fill","stylers":[{"color":"#ccdca1"}]},{"featureType":"road","elementType":"labels.text.fill","stylers":[{"color":"#767676"}]},{"featureType":"road","elementType":"labels.text.stroke","stylers":[{"color":"#ffffff"}]},{"featureType":"poi","stylers":[{"visibility":"off"}]},{"featureType":"landscape.natural","elementType":"geometry.fill","stylers":[{"visibility":"on"},{"color":"#b8cb93"}]},{"featureType":"poi.park","stylers":[{"visibility":"on"}]},{"featureType":"poi.sports_complex","stylers":[{"visibility":"on"}]},{"featureType":"poi.medical","stylers":[{"visibility":"on"}]},{"featureType":"poi.business","stylers":[{"visibility":"simplified"}]}]
                    };

                    map = new google.maps.Map(document.getElementById('map'), mapOptions);
                    var marker = new google.maps.Marker({
                        position: latlng,
                        map: map,
                        title:"Вы знаходитесь в данном месте"
                    });
                }



                
                function drivingRoute(from, to) {
                    var request = {
                        origin: from,
                        destination: to,
                        travelMode: google.maps.DirectionsTravelMode.DRIVING,
                        unitSystem: google.maps.UnitSystem.METRIC
                    };
                    $('#controls p').removeClass('error');
                    $('#controls p').text('loading');
                    if(typeof(drivingLine) !== 'undefined') drivingLine.setMap(null);
                    directionsService.route(request, function(response, status){
                        if(status == google.maps.DirectionsStatus.OK){

                            var totalKM = (response.routes[0].legs[0].distance.value / 1000);
                            var miles = Math.round(totalKM * 1 * 10) / 10;
                            var distanceText = miles+' КМ';
                            $('#controls p').text(distanceText);

                            drivingLine = new google.maps.Polyline({
                                path: response.routes[0].overview_path,
                                strokeColor: "#b00",
                                strokeOpacity: .75,
                                strokeWeight: 5
                            });
                            drivingLine.setMap(map);
                            map.fitBounds(response.routes[0].bounds);

                        }

                        else {
                            $('#controls p').addClass('error');
                            $('#controls p').text('cannot load route');
                        }

                    });

                }

                $('input').blur(function(){
                    drivingRoute(
                        $('input[name=from]').val(),
                        $('input[name=to]').val()
                    );
                });

                var map;
                var drivingLine;
                var directionsService = new google.maps.DirectionsService();
                initMap();
                $('input[name=from]').val(my_adress);
                $('input[name=to]').val('');
                $('input[name=from]').trigger('blur');
            },
            error: function (err) {
                console.log("Ошибка сервера")
            }
        })
    }
    myplace();
    markermap();




  
});
html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Route Aplication</title>
   <link media="screen" href="demo/styles/demo.css" type="text/css" rel="stylesheet" />
   <link rel="shortcut icon" href="http://www.rudebox.org.ua/wp-content/themes/mystique/favicon.ico" />
    <link rel="stylesheet" href="css/style.css" media="screen" type="text/css" />
</head>
<body>


<br><br>
  <div id="controls">
  <label><span><b>От куда:</b></span>  <input type="text" name="from"></label>
  <label><span><b>Куда:</b></span> <input type="text" name="to"></label>
  <p></p>
</div>


<div id="map"></div>

  <script src="js/jquery-3.2.1.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAsuS1MqzRBzRv1HRrfrlyoMRlkrVXEx0g&callback=initMap"></script>
  <script src="js/maps.js"></script>
  <script src="js/index.js"></script>


  <script src="js/jquery-3.2.1.min.js"></script>

</body>

</html>
css
html,
body {
  position: relative;
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: 'Montserrat', sans-serif;
  font-size: 12pt;
  color: #000;
  overflow:  hidden;
}
#map {
  margin-left: 420px;
  width: 700px;
  height: 490px;
}
#controls {
  position: absolute;
  top: 4.1em;
  right: 1.5em;
  z-index: 10;
  background: #fff;
  padding: 1em 2em;
  opacity: .8;
  border-top: solid .4em #444;
  border-bottom: solid .4em #444;
}
#controls label {
  display: block;
  margin: 1em 0;
}
#controls label span {
  display: inline-block;
  min-width: 3.5em;
}
#controls label input {
  font-family: 'Montserrat';
  font-size: 12pt;
  padding-bottom: .2em;
  width: 10em;
  border: none;
  border-bottom: solid 1px #999;
  color: #000;
  outline: none;
  webkit-appearance: none;
}
#controls p {
  text-align: right;
  font-size: 80%;
  margin: 1em 0 .5em 0;
}
#controls p.error {
  color: #b00;
}
  • Вопрос задан
  • 110 просмотров
Пригласить эксперта
Ответы на вопрос 2
@vaskadogana
Frontend developer
Получить координаты меток и вычислить с какой меткой разница координат меньше и к ней строить)
lat+lng (метки) - lat+lng (твоего места)
запушить в массив
выбрать из массива самое маленькое значение по модулю
нарисовать маршрут

вроде должно прокатить)

p.s. api direction вроде имеет встроенный метод
Ответ написан
freeExec
@freeExec
Участник OpenStreetMap
Если вам самый короткий по дороге, то вам нужно использовать Distance Matrix
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы