Нужно построить автомобильный и пешеходный маршруты через google maps по двум точкам. Есть два поля ввода (от и до), и две кнопки (автомобильный маршрут и пеший). Для каждой кнопки есть своя функция. Все работает, только при построении нового маршрута не удаляется старый. Как сделать чтобы перед построением карта очищалась?
var myOptions = {
zoom: 16,
center: new google.maps.LatLng(53.8374829,21.1518056),
gestureHandling: 'cooperative',
scrollwheel: false,
navigationControl: false,
mapTypeControl: false,
scaleControl: false,
streetViewControl: false,
zoomControl: true,
};
var directionsService = new google.maps.DirectionsService;
var directionsDisplay = new google.maps.DirectionsRenderer;
var mapObject = new google.maps.Map(document.getElementById("map"), myOptions);
function route1(from, to) {
var directionsService = new google.maps.DirectionsService();
var directionsRequest = {
origin: from,
destination: to,
travelMode: google.maps.DirectionsTravelMode.WALKING,
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 />");
}
);
}
function route2(from, to) {
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() {
$("#walking button").click(function(event) {
event.preventDefault();
route1($("#route-from").val(), $("#route-to").val());
});
$("#driving button").click(function(event) {
event.preventDefault();
route2($("#route-from").val(), $("#route-to").val());
});
});
Пожалуйста - https://jsfiddle.net/1Lawd8a8/
Необходимо результат выполнения new google.maps.DirectionsRenderer
присваивать какой нибудь переменной, а перед прокладкой нового маршрута вызвать у этой переменной метод setMap
, к примеру:
var route = new google.maps.DirectionsRenderer({ //Добавили маршрут на карту
map: mapObject,
directions: response
});
route.setMap(null) //Удалили с карты
На jsfiddle целиком рабочий пример
Кофе для программистов: как напиток влияет на продуктивность кодеров?
Рекламные вывески: как привлечь внимание и увеличить продажи
Стратегії та тренди в SMM - Технології, що формують майбутнє сьогодні
Выделенный сервер, что это, для чего нужен и какие характеристики важны?
Современные решения для бизнеса: как облачные и виртуальные технологии меняют рынок
Помогите решить проблему с выводом ошибки javascript в gulp при помощи плагинов, которые выводят ошибку в отдельном окне, как notyficationДля less настроил,...
Здравствуйте я новичок в JS, не подскажите как реализовать такую идеюЕсть 1но поле для текста, 2 кнопки переключения раскладки иностранного...