Как нарисовать маршрут между несколькими маркерами и показать их.?
Я занимаюсь разработкой веб-приложения, используя карту Google версии 3 и Spring MVC. Это для отслеживания нашей команды продаж, у которых есть телефоны с GPS. Теперь я реализую эту страницу для начала и конца розыгрыша и его 'markers.its, называемый фактическим распорядком продаж. Он работает отлично.[Я получил последний GPS по таблице и отправлять ответы json и показывать их текущее положение каждые 30 минут], но теперь нам нужно реализовать функцию для добавления целевой подпрограммы из них. Затем менеджеру нужно добавить больше маркеров (более 5 или 6) и настроить для них процедуру. Здесь показан мой код и, пожалуйста, помогите мне разобраться с этой проблемой.
теперь мои пользовательские маркеры не показаны [показаны только начальная и конечная точки], и поэтому я не могу выделить подпрограмму между ними, где добавить метод addRouteMarkers.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>TSR Route Tracker</title>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<style type="text/css">
#map-canvas {
width: 100%;
height: 480px;
margin-top: 10px;
}
#target {
width: 345px;
}
</style>
<script>
function calculateRoute(from, to) {
var mapObject = new google.maps.Map(document.getElementById("map-canvas"), myOptions);
var myOptions = {
zoom: 20,
center: new google.maps.LatLng(7.2964, 80.6350),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var directionsService = new google.maps.DirectionsService();
var directionsRequest = {
origin: from,
destination: to,
travelMode: google.maps.DirectionsTravelMode.DRIVING,
unitSystem: google.maps.UnitSystem.METRIC
};
directionsService.route(
directionsRequest,
function(response, status)
{
if (status == google.maps.DirectionsStatus.OK)
{
new google.maps.DirectionsRenderer({
map: mapObject,
directions: response
});
}
else
$("#error").append("Unable to retrieve your route<br />");
}
);
}
$(document).ready(function() {
// If the browser supports the Geolocation API
if (typeof navigator.geolocation == "undefined") {
$("#error").text("Your browser doesn't support the Geolocation API");
return;
}
$("#calculate-route").submit(function(event) {
event.preventDefault();
calculateRoute($("#from").val(), $("#to").val());
});
});
//==============================================================================================
function addRouteMarkers(){//WHERE THIS METHOD NEED TO ADD.I ADDED ONLOAD ALSO BUT RESULT NOT SHOWS
var mapOptions = {
zoom: 10,
center: new google.maps.LatLng(7.2964, 80.6350)
};
var image = 'resources/blue-dot.png';
var myLatLng1 = new google.maps.LatLng(7.2964, 80.6350);
var myLatLng2 = new google.maps.LatLng(7.1559054,80.6319505);
var myLatLng3 = new google.maps.LatLng(6.8097252,80.4996157);
var mapObject = new google.maps.Map(document.getElementById("map-canvas"), myOptions);
var routeMarker1 = new google.maps.Marker({
position: myLatLng1,
map: mapObject,
icon: image
});
var routeMarker2 = new google.maps.Marker({
position: myLatLng2,
map: mapObject,
icon: image
});
var routeMarker3 = new google.maps.Marker({
position: myLatLng3,
map: mapObject,
icon: image
});
}
function initialize() {
var markers = [];
var input = (document.getElementById('from'));
var input2 = (document.getElementById('to'));
//map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
var searchBox = new google.maps.places.SearchBox((input));
var searchBox2 = new google.maps.places.SearchBox((input2));
google.maps.event.addListener(searchBox, 'places_changed', function() {
var places = searchBox.getPlaces();
for (var i = 0, marker; marker = markers[i]; i++) {
marker.setMap(null);
}
markers = [];
var bounds = new google.maps.LatLngBounds();
for (var i = 0, place; place = places[i]; i++) {
var image = {
url: place.icon,
size: new google.maps.Size(71, 71),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(17, 34),
scaledSize: new google.maps.Size(25, 25)
};
var marker = new google.maps.Marker({
map: map,
icon: image,
title: place.name,
position: place.geometry.location
});
markers.push(marker);
bounds.extend(place.geometry.location);
}
map.fitBounds(bounds);
});
google.maps.event.addListener(searchBox2, 'places_changed', function() {
var places2 = searchBox.getPlaces();
for (var i = 0, marker; marker = markers[i]; i++) {
marker.setMap(null);
}
markers = [];
var bounds = new google.maps.LatLngBounds();
for (var i = 0, place; place = places2[i]; i++) {
var image = {
url: place.icon,
size: new google.maps.Size(71, 71),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(17, 34),
scaledSize: new google.maps.Size(25, 25)
};
var marker = new google.maps.Marker({
map: map,
icon: image,
title: place.name,
position: place.geometry.location
});
markers.push(marker);
bounds.extend(place.geometry.location);
}
map.fitBounds(bounds);
});
google.maps.event.addListener(map, 'bounds_changed', function() {
var bounds = map.getBounds();
searchBox.setBounds(bounds);
searchBox2.setBounds(bounds);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body style="font-family: Monaco, Consolas, Lucida Console, monospace">
<h1 >Select TSR Route</h1>
<form id="calculate-route" name="calculate-route" action="#" method="get">
<table >
<tr>
<td><label for="from">From</label></td>
<td><input type="text" id="from" name="from" placeholder="" required="required" size="30" /></td>
</tr>
<tr>
<td><label for="to">To</label></td>
<td><input type="text" id="to" name="to" placeholder="" required="required" size="30" /></td>
</tr>
<tr>
<td><input type="submit" value="Submit" /></td>
<td><input type="reset" /></td>
</tr>
</table>
</form>
<div id="map-canvas"></div>
<p id="error"></p>
</body>
</html>