使用传单拖动标记时用折线标记

Question

您好，我在标记与多段线之间建立了联系，就像这张图片。我在这里附上一个样本。

当我用折线拖动标记时，如何使拖动成为可能。

示例，如果我拖动标记 3，它也应该更新折线点，并且我放置标记 3 的折线应该与标记 3 连接。

我需要这种拖动标记时也可以更新折线的拖动事件。

我正在使用leaflet来实现这个目的，但仍然无法解决折线标记的拖动逻辑。

这是我使用的示例代码

$http.get("db/getConnectionData.php").then(function (response) {


$scope.links1 = response.data.records;


// $scope.showArrow();
   angular.forEach($scope.links1, function(value, i) {
        var source_panoId = $scope.links1[i].s_panoId;
        var dest_panoId   = $scope.links1[i].d_panoId;
        var sPanoID      = $scope.links1[i].sourcePano_id;
        var dPpanoID     = $scope.links1[i].destPano_id;


          angular.forEach($scope.panoramas, function(value, index) {
              if($scope.panoramas[index].panoId == source_panoId){
                   if($scope.links.indexOf($scope.panoramas[index])== -1){
                         $scope.links.push($scope.panoramas[index]);
                     }
                    var SlatLang = $scope.panoramas[index].project_latLng ;
                    var SLatLngArr = SlatLang.split(",");
                    var Slat  = parseFloat(SLatLngArr[0]);
                    var Slang = parseFloat(SLatLngArr[1]);
                    var polypoint1 = [Slat, Slang];

                angular.forEach($scope.panoramas, function(value, index1) {
                   if($scope.panoramas[index1].panoId == dest_panoId){         
                       if($scope.links.indexOf($scope.panoramas[index1])== -1){                                      
                            $scope.links.push($scope.panoramas[index1]);
                        }
                        var DlatLang = $scope.panoramas[index1].project_latLng ;
                        var DLatLngArr = DlatLang.split(",");
                        var Dlat  = parseFloat(DLatLngArr[0]);
                        var Dlang = parseFloat(DLatLngArr[1]);
                        var polypoint2 = [Dlat, Dlang];

                       // Draw seperate polyline for each connection
                        polyline = L.polyline([[Slat, Slang],[Dlat, Dlang]],
                                              {
                                                color: 'blue',
                                                weight: 5,
                                                opacity: .7,
                                              }
                                              ).addTo(map);

                                    $scope.polycoords.push(polyline);


                                }

                            });


                        }

                    });

这是我用来使用折线拖动标记的代码

angular.forEach($scope.panoramas, 函数(值, index4){

$scope.markers[index4].on('dragstart', 函数(e){

            var latlngs = polyline.getLatLngs(),
                latlng = $scope.markers[index4].getLatLng();

            for (var i = 0; i < latlngs.length; i++) {
                if (latlng.equals(latlngs[i])) {
                    this.polylineLatlng = i;
                }
            }



        });//dragstart

        $scope.markers[index4].on('drag', function(e){

          var latlngs = polyline.getLatLngs(),
              latlng = $scope.markers[index4].getLatLng();
              latlngs.splice(this.polylineLatlng, 1, latlng);
              polyline.setLatLngs(latlngs);
        });//drag

        $scope.markers[index4].on('dragend', function(e){
          delete this.polylineLatlng;
        });//dragEnd

    });

Answer 1

首先，在创建标记时，记得将 draggable 选项作为 true 传递，如下所示：

var marker = L.marker(latLng, { draggable: true });

现在，check which drag event you want to attach a listener to and then call the redraw回调函数内部的折线，像这样：

// var polyline defined somewhere
marker.on('drag', function (e) {
    polyline.redraw();
});

如果这不起作用，请提供示例代码以便我们解决。

编辑

您还需要更改折线的坐标，否则重绘将无济于事。查看关于 SO 的答案，看看它是否符合您的需求。

编辑 2

您正在使用一组多段线，而答案仅使用一条具有坐标组的多段线，因此在您的情况下，您需要使用两个循环来完成相同的任务。你可以让它更快，并且可以使用一个对象作为查找 table 来为每个标记获取正确的多段线，例如，像这样：

var table = {};
// ...
table[marker] = polyline;

稍后您可以获得用于每个标记的折线。但无论如何，这就是我认为在您的情况下会像示例中那样起作用的方法（有点难以理解，但我希望它对您有用）。

我不知道您将示例的第二部分（事件处理程序）放在哪里，但我认为它不在创建多段线的双循环内，对吧？这就是我想出的：

marker.on('dragstart', function (e) {
    var markerLatLng = marker.getLatLng();

    this.polylineLatLngs = [];
    for (var i = 0; i < $scope.polycoords.length; i++) {
        var polyline = $scope.polycoords[i];
        var latLngs = polyline.getLatLngs()

        for (var j = 0; j < latLngs.length; j++) {
            if (markerLatLng.equals(latLngs[j])) {
                this.polylineLatLngs.push([i, j]);
            }
        }
    }
});

marker.on('drag', function (e) {
    for (var i = 0; i < this.polylineLatLngs.length; i++) {
        var polyline = $scope.polycoords[this.polylineLatLngs[i][0]];
        var latLngs = polyline.getLatLngs();
        var markerLatLng = marker.getLatLng();

        latLngs.splice(this.polylineLatLngs[i][1], 1, markerLatLng);
        polyline.setLatLngs(latLngs);
    }
});

Answer 2

我遇到了这种行为。请告诉我如何解决这个问题。

感谢您的宝贵时间。

这是通过从数据库中获取数据或通过在全景图之间建立连接而创建的折线。

这张图片当我开始拖动标记 2 时，我得到了这样的结果

这是我拖动标记 3 时的图像。我使用您在上面提供的源代码得到的这种结果。

使用传单拖动标记时用折线标记

marker with polyline while dragging the marker using leaflet

marker

google-polyline

leaflet