0

Я хочу, чтобы позволить пользователю нажать на картеDraw строка после каждого события клик - Google Maps выберите событие только выстреливает один раз

  • последнее событие щелчка будет использоваться, чтобы установить X и Y координаты точка В

  • точка А имеет координаты предопределены 2,42249, 3,82618.

EDIT:

  • Предыдущие строки должны быть очищены - и не видно на карте.

Найдите код ниже, проблема с моим кодом заключается в том, что событие click только срабатывает один раз. Я хочу нарисовать линию после каждого щелчка.

function initialize() 
{ 
    var mapOptions = 
    { 
     zoom: 3, 
     center: new google.maps.LatLng(2.42249, 3.82618), 
     mapTypeId: google.maps.MapTypeId.TERRAIN 
    }; 

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

    google.maps.event.addListener(map, 'click', function(event) 
    { 
     drawLine(event.latLng); 
    }); 
} 

function drawLine(loc) 
{ 

    mapOptions = 
    { 
     zoom: 3, 
     center: new google.maps.LatLng(2.42249, 3.82618), 
     mapTypeId: google.maps.MapTypeId.TERRAIN 
    }; 
    map = new google.maps.Map(document.getElementById('map-canvas'), 
     mapOptions); 

    flightPlanCoordinates = [ 
     new google.maps.LatLng(2.42249, 3.82618), 
     new google.maps.LatLng(loc.lat(), loc.lng()) 
    ]; 
    flightPath = new google.maps.Polyline({ 
     path: flightPlanCoordinates, 
     geodesic: true, 
     strokeColor: '#FF0000', 
     strokeOpacity: 1.0, 
     strokeWeight: 2 
    }); 

    flightPath.setMap(map); 
} 
google.maps.event.addDomListener(window, 'load', initialize); 
+0

Почему вы инициализируете карту каждый раз, когда добавляете строку? Это не может быть хорошо. – Andy

+0

Я не знаком - но я думаю, что мне нужно инициализировать мою карту на каждом клике, потому что я хочу избавиться от предыдущих строк. – SamekaTV

ответ

1

Энди указывает на проблему, вы воссоздаете карту каждый раз, когда вы ее нажимаете. Попробуйте сделать переменную global map так, чтобы она была доступна для обеих функций и избавилась от дублирующего кода между обеими функциями. Что-то вроде:

var map, flightPath = new google.maps.Polyline(); 

function initialize() 
{ 
    var mapOptions = 
    { 
     zoom: 3, 
     center: new google.maps.LatLng(2.42249, 3.82618), 
     mapTypeId: google.maps.MapTypeId.TERRAIN 
    }; 

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

    google.maps.event.addListener(map, 'click', function(event) 
    { 
     drawLine(event.latLng); 
    }); 
} 

function drawLine(loc) { 
    var flightPlanCoordinates = [ 
     new google.maps.LatLng(2.42249, 3.82618), 
     loc 
    ]; 

    flightPath.setMap(null); 

    flightPath = new google.maps.Polyline({ 
     path: flightPlanCoordinates, 
     geodesic: true, 
     strokeColor: '#FF0000', 
     strokeOpacity: 1.0, 
     strokeWeight: 2 
    }); 

    flightPath.setMap(map); 
} 

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

(обновлено для демонстрации очистки полилинии с карты каждый раз, когда вы щелкаете)

+0

Предыдущая строка (точка A) должна быть удалена/очищена. – SamekaTV

+0

ой действительно? Новое требование, вы не упомянули об этом в своем первоначальном вопросе. Сделайте переменную 'FlightPath' глобальной. В функции 'drawLine' установите для своего отображения значение null, чтобы удалить его с помощью' flightPath.setMap (null) ', поэтому вы всегда рисуете новый. В качестве альтернативы рисуйте его один раз, и drawLine просто обновляет свои координаты, если он уже существует. – duncan

+0

Я обновил свой вопрос. – SamekaTV

0

Это должно работать. Создайте карту только один раз. Создайте полигон только один раз. Затем просто добавьте строки

var map; 
var flightPath; 
var firstLatLng = new google.maps.LatLng(2.42249, 3.82618); 

function initialize() 
{ 
    var mapOptions = 
    { 
     zoom: 3, 
     center: new google.maps.LatLng(2.42249, 3.82618), 
     mapTypeId: google.maps.MapTypeId.TERRAIN 
    }; 

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

    google.maps.event.addListener(map, 'click', function(event) 
    { 
     drawLine(event.latLng); 
    }); 
} 

function createLine(loc){ 

    flightPath = new google.maps.Polyline({ 
     geodesic: true, 
     strokeColor: '#FF0000', 
     strokeOpacity: 1.0, 
     strokeWeight: 2 
    }); 

    flightPath.setMap(map); 
} 

function drawLine(loc) 
{ 
    if (flightPath == null) 
     createLine(); 

    flightPlanCoordinates = [ 
     firstLatLng, 
     loc 
    ]; 
    flightPath.setPath(flightPlanCoordinates); 
} 
google.maps.event.addDomListener(window, 'load', initialize); 
+0

Это странное поведение, точка B меняет и не имеет постоянных координат x и y. – SamekaTV

+0

Попробуйте сейчас. Странное поведение связано с тем, что создается полилиния. Правильный способ - создать массив путей после первого щелчка, а затем ждать другого щелчка. –

+0

Ваш код принимает предыдущие координаты кликов как точку A и новые координаты кликов для точки B. Точка A всегда должна иметь свои предопределенные координаты. 2.42249, 3.82618 – SamekaTV