Как динамически загружать маркеры на карты Google и прокладывать маршрут между ними? - PullRequest
Новая
       5

Как динамически загружать маркеры на карты Google и прокладывать маршрут между ними?

0 голосов
/ 04 октября 2011

Мне нужно сделать страницу с картой Google в ней.Внутри будет точка фиксации (офис компании).

Вне карты у меня будет выпадающий список.Когда пользователь выбирает опцию из списка, мне нужно показать на карте выбранную опцию и нарисовать линию (маршрут), чтобы соединить две точки.

Пока я могу иметь фиксированную точку на карте спользовательский значок, но я не могу найти способ динамически добавить вторую точку и нарисовать маршрут между двумя точками.

Возможно ли это?Я не нашел никаких учебников по этому вопросу, и мне было интересно, если кто-нибудь может указать мне правильное направление.

Ответы [ 2 ]

4 голосов
/ 04 октября 2011

С некоторыми изменениями этот пример должен помочь вам начать: 

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps JavaScript API v3 Example: Directions Simple</title>
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
  var directionDisplay;
  var directionsService = new google.maps.DirectionsService();
  var map;

  function initialize() {
    directionsDisplay = new google.maps.DirectionsRenderer();
    var chicago = new google.maps.LatLng(41.850033, -87.6500523);
    var myOptions = {
      zoom:7,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      center: chicago
    }
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    directionsDisplay.setMap(map);
  }

  function calcRoute() {
    var start = document.getElementById("start").value;
    var end = document.getElementById("end").value;
    var request = {
        origin:start, 
        destination:end,
        travelMode: google.maps.DirectionsTravelMode.DRIVING
    };
    directionsService.route(request, function(response, status) {
      if (status == google.maps.DirectionsStatus.OK) {
        directionsDisplay.setDirections(response);
      }
    });
  }
</script>
</head>
<body onload="initialize()">
<div>
<b>Start: </b>
<select id="start" onchange="calcRoute();">
  <option value="chicago, il">Chicago</option>
  <option value="st louis, mo">St Louis</option>
  <option value="joplin, mo">Joplin, MO</option>
  <option value="oklahoma city, ok">Oklahoma City</option>
  <option value="amarillo, tx">Amarillo</option>
  <option value="gallup, nm">Gallup, NM</option>
  <option value="flagstaff, az">Flagstaff, AZ</option>
  <option value="winona, az">Winona</option>
  <option value="kingman, az">Kingman</option>
  <option value="barstow, ca">Barstow</option>
  <option value="san bernardino, ca">San Bernardino</option>
  <option value="los angeles, ca">Los Angeles</option>
</select>
<b>End: </b>
<select id="end" onchange="calcRoute();">
  <option value="chicago, il">Chicago</option>
  <option value="st louis, mo">St Louis</option>
  <option value="joplin, mo">Joplin, MO</option>
  <option value="oklahoma city, ok">Oklahoma City</option>
  <option value="amarillo, tx">Amarillo</option>
  <option value="gallup, nm">Gallup, NM</option>
  <option value="flagstaff, az">Flagstaff, AZ</option>
  <option value="winona, az">Winona</option>
  <option value="kingman, az">Kingman</option>
  <option value="barstow, ca">Barstow</option>
  <option value="san bernardino, ca">San Bernardino</option>
  <option value="los angeles, ca">Los Angeles</option>
</select>
</div>
<div id="map_canvas" style="top:30px;"></div>
</body>
</html>

Код от: http://code.google.com/apis/maps/documentation/javascript/examples/directions-simple.html


Пожалуйста, обратитесь к Google Maps API , если вы хотите прочитать о MapOptions и MapTypeId, например, если вы хотите сделать другие настройки для вашей карты.

2 голосов
/ 04 октября 2011

То, что вы также можете сделать, используя код stealthyninja, находится в функции calcRoute, добавить маркер на карту в соответствующей конечной точке.И вместо географических названий вы также можете использовать координаты широты / долготы (которые могут дать вам лучшие результаты, если точки высадки должны быть более точными).

...