Помогите с Google Maps API

  1. Weblancer
  2. Форум фрілансерів
  3. Програмування
Евгений С.
75 повідомлень
#10 років тому
Здравствуйте, моя проблема заключается в следующем: мне нужна программа которая рассчитывает маршрут, показывает длину и время по маршруту с Точки А в точку В, большая часть всего уже есть. Я сделал из примеров, что давали Google 
Но у меня не получается в коде сделать так, чтобы точку В (т.е место куда нужнорассяитать маршрут с точки А) можно было вводить с поля input, кто сталкивался с Google Maps подскажите пожалуйста, как мне  поступить.

Вот то, что получилось, на данный момент = > 

А Вот код

<!DOCTYPE html>

<html>

  <head>

   <meta name="viewport" content="initial-scale=1.0, user-scalable=no">

    <meta charset="utf-8">

    <title>Distance Matrix service</title>

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

    <style>

      html, body {

        height: 100%;

        margin: 0;

        padding: 0;

      }

      #map-canvas {

        height: 100%;

        width: 50%;

      }

      #content-pane {

        float:right;

        width:48%;

        padding-left: 2%;

      }

      #outputDiv {

        font-size: 11px;

      }

    </style>

    <script>

var map;

var geocoder;

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

var markersArray = ;

var origin1 = new google.maps.LatLng(50.4320526, 30.5399256);

var destinationA = 'Stockholm, Sweden';

var destinationIcon = ';;

var originIcon = ';;

function initialize() {

  var opts = {

    center: new google.maps.LatLng(50.4320526, 30.5399256),

    zoom: 12

  };

  map = new google.maps.Map(document.getElementById('map-canvas'), opts);

  geocoder = new google.maps.Geocoder();

}

function calculateDistances() {

  var service = new google.maps.DistanceMatrixService();

  service.getDistanceMatrix(

    {

      origins: ,

      destinations: ,

      travelMode: google.maps.TravelMode.DRIVING,

      unitSystem: google.maps.UnitSystem.METRIC,

      avoidHighways: false,

      avoidTolls: false

    }, callback);

}

function callback(response, status) {

  if (status != google.maps.DistanceMatrixStatus.OK) {

    alert('Error was: ' + status);

  } else {

    var origins = response.originAddresses;

    var destinations = response.destinationAddresses;

    var outputDiv = document.getElementById('outputDiv');

    outputDiv.innerHTML = '';

    deleteOverlays();

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

      var results = response.rows.elements;

      addMarker(origins, false);

      for (var j = 0; j < results.length; j++) {

        addMarker(destinations, true);

        outputDiv.innerHTML += origins + ' to ' + destinations

            + ': ' + results.distance.text + ' in '

            + results.duration.text + '<br>';

      }

    }

  }

}

function addMarker(location, isDestination) {

  var icon;

  if (isDestination) {

    icon = destinationIcon;

  } else {

    icon = originIcon;

  }

  geocoder.geocode({'address': location}, function(results, status) {

    if (status == google.maps.GeocoderStatus.OK) {

      bounds.extend(results.geometry.location);

      map.fitBounds(bounds);

      var marker = new google.maps.Marker({

        map: map,

        position: results.geometry.location,

        icon: icon

      });

      markersArray.push(marker);

    } else {

      alert('Geocode was not successful for the following reason: '

        + status);

    }

  });

}

function deleteOverlays() {

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

    markersArray.setMap(null);

  }

  markersArray = ;

}

google.maps.event.addDomListener(window, 'load', initialize);

    </script>

  </head>

  <body>

    <div id="content-pane">

      <div id="inputs">

        <pre>

Введіть адресу доставки.

        </pre>

      <input type="text" id="find" value="">

        <p><button type="button" onclick="calculateDistances();">Разрахувати маршрут</button></p>

      </div>

      <div id="outputDiv"></div>

    </div>

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

  </body>

</html>
Сергей Глушко
834 повідомлення
#10 років тому
По нажатию на кнопку "Расчитать" получить через jquery(или чем удобно) значение input , вычислить координаты адреса, и вызвать функцию расчета с новым параметром
Евгений С.
75 повідомлень
#10 років тому
micros, Извините, а можео хотя бы пример? Я не программист просто.
Елена Б.
6863 повідомлення
#10 років тому
Pow_design, не подскажете, как мне вылечиить больной зуб? Вырвать я уже умею, осталось только что-то на его место постввить, чтоб было красиво и больше не болело. Только наглядно объясните, пожалуйста, я не стоматолог.
Евгений С.
75 повідомлень
#10 років тому
floppox, Я просто пример попросил, я не просил, докладно объяснять, какая переменная за, что будет отвечать. Спасибо Вы ясно дали понять, что я сам должен разбиратся, и зря сюда писал.