同时拖动2个Google地图标记

时间:2017-03-23 17:06:46

标签: javascript google-maps-api-3 vue.js lodash

我在网上发现了一些文章和一些关于堆栈溢出的帖子,解释了如何选择多个标记,但我找不到任何可以同时拖动2个标记的东西。我已经能够以允许1个标记在其兄弟上触发事件并拖动相关标记的方式使其工作,但不知何故它会停止我点击的标记上的拖动事件。

我无法使用复杂多边形,因为无法更改复杂标记svg上只有一条路径的颜色。我必须创建2个svgs,一个用于中心填充,另一个用于外部填充,然后我必须更改外部填充的颜色。

这是如何运作的。

首先,我创建标记,然后将它们放在同一位置。

然后我将这些标记传递给这个函数。

addMultiMarkerListener:function(id, outer, inner){
    var arr = ['mousedown', 'mouseup', 'click','mouseover','mouseout', 'dragend','drag','dragstar'];
    var evtArr = {}
        _.each(arr, function(evt){
            evtArr[evt] = {};
            evtArr[evt][id] = false;

            outer.addListener(evt, function(){
                if(!evtArr[evt][id]){
                    evtArr[evt][id] = true;
                    google.maps.event.trigger(inner, evt);
                    evtArr[evt][id] = false

                }

            })

            inner.addListener(evt, function(){
                 if(!evtArr[evt][id]){
                    evtArr[evt][id] = true;
                    google.maps.event.trigger(outer, evt);
                    evtArr[evt][id] = false
                }
            })
        })

    },

我希望这能够触发两个标记的mousedown事件,这样当我单击时,我可以同时拖动这两个标记。它现在的工作方式,当我在兄弟标记上触发mousedown事件时,停止第一个mousedown事件。

我还在想我可以发射一个不会干扰第一个事件的单独事件。可能需要一点深思,但我认为我可以让它发挥作用。我只是希望其他人能够对此提供一些见解。

1 个答案:

答案 0 :(得分:1)

我解决了这个问题。我决定在拖动事件中获取第一个标记的位置,然后将第二个标记的位置设置为第一个标记的位置,而不是触发两个mousedown事件。像这样。

  addDragListener: function(marker, id, centerMarker) {
        var self = this;
        var fill = centerMarker;


        marker.addListener('drag', function(){
            var position = marker.getPosition();
            fill.setPosition(position);

        })
  }