Полилиния карты Google не очищается

У меня есть образец карты Google, здесь, где я могу нарисовать полилинию и перетащить маркер, чтобы перерисовать полилинию. Когда я перетаскиваю маркер, я используюPath.setMap(null) для перерисовки ломаной линии как,

  google.maps.event.addListener(marker, 'dragend', function(event) {

                    var newLatLng = event.latLng;

                    var index = Latlngs.map(function(element) {
                        return element[0];
                    }).indexOf(marker.id);
                    if (index !== -1) {
                        Latlngs[index] = [marker.id, newLatLng];
                    }

                    console.log(Latlngs);
                    var changedLine=[];
                    for (var i = 0; i < Latlngs.length; i++) {
                        changedLine.push(Latlngs[i][1]);
                    }
                    console.log(changedLine);
                     Path.setMap(null);
                     draw(changedLine, map);
                });

Но полилиния не очищается должным образом. Как очистить старый путь и перерисовать его заново?


google-maps javascript google-maps-api-3 google-polyline
person mpsbhat    schedule 28.09.2015    source источник
comment
Чего именно вы хотите достичь? Когда вы перемещаете красный маркер, он стирает ломаную линию, пока вы снова не отпустите ее.   -  person Eugen Sunic    schedule 28.09.2015

Ответы (1)


arrow_upward
2
arrow_downward

Проблема в создании маркеров. Когда вы создаете новый маркер, вы вызываете draw, не удаляя существующий _2 _ (_ 3_)

Это исправит:

        function placeMarkerAndPanTo(latLng, map) {

            var marker = new google.maps.Marker({
                position: latLng,
                map: map,
                draggable: true
            });
            markers.push(marker);
            marker.id = uniqueId;
            Latlngs.push([uniqueId, latLng]);
            uniqueId++;
            console.log(Latlngs);

          //draw(Line, map);

            google.maps.event.addListener(marker, 'dragend', function(event) {
                if(Path)Path.setMap(null);
                var newLatLng = event.latLng;

                var index = Latlngs.map(function(element) {
                    return element[0];
                }).indexOf(marker.id);
                if (index !== -1) {
                    Latlngs[index] = [marker.id, newLatLng];
                }


                var changedLine=[];
                for (var i = 0; i < Latlngs.length; i++) {
                    changedLine.push(Latlngs[i][1]);
                }


                 draw(changedLine, map);
            });
            google.maps.event.trigger(marker,'dragend',
                                      {latLng:marker.getPosition()})

        }

Но рисовать новую полилинию не нужно, полилинии-пути можно изменять напрямую:

function initMap() {
    var goo     = google.maps,
        map     = new goo.Map(document.getElementById('map'), {
                    zoom: 10,
                    center: new goo.LatLng(12.8799313333, 77.5991386667)
                  }),
        line    = new goo.Polyline({
                                      path:[],
                                      geodesic: true,
                                      strokeColor: '#FF0000',
                                      strokeOpacity: 1.0,
                                      strokeWeight: 2 ,
                                      map:map
                                   }),
        markers = new goo.MVCArray;
        
        goo.event.addListener(map, 'click', function(e) {
          var marker = new goo.Marker({ position:e.latLng,
                                        map:map,
                                        draggable:true});
          markers.push(marker);
          //push new point to the path
          line.getPath().push(marker.getPosition());
          
          goo.event.addListener(marker,'dragend',function(){
            //simply update the path
            line.getPath().setAt(markers.indexOf(this),
                                 this.getPosition());
          });
          goo.event.addListener(marker,'dblclick',function(){
            //remove marker and path-point
            line.getPath().removeAt(markers.indexOf(this));
            markers.removeAt(markers.indexOf(this));
            this.setMap(null)
          });
        });


  }
html,body,#map{height:100%;margin:0;padding:0;}
<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?v=3&callback=initMap"></script>

person Dr.Molle    schedule 28.09.2015
comment
Как удалить иконку и перерисовать карту двойным щелчком? Я кое-что пробовал здесь: jsfiddle.net/mpsbhat/u84wsaLd/6 - person mpsbhat; 01.10.2015
comment
Также нет необходимости что-то перерисовывать. Оба ... полигональный путь и массив маркеров - это MVCArrays, у которых есть метод removeAt (который ожидает индекс элемента, который должен быть удален). Удалите маркер и точку пути и установите для свойства map маркера значение null (я добавил его в демонстрацию выше) - person Dr.Molle; 02.10.2015
comment
Также как я могу нарисовать линию с ветвями? - person mpsbhat; 02.10.2015
comment
для гугл-карты такой формы нет, рисуем несколько линий - person Dr.Molle; 02.10.2015