Question

标记是可拖动的，但我不能在标记上有自定义div，它会在悬停点击等时发生变化。因此我想到使用自定义叠加，但我无法找出自定义叠加支持拖动。已经有了答案，但演示本身不起作用，

how to make a Custom Overlays draggable using google-maps v3

我没有在overlayView类的代码引用中找到任何内容。

Answer 1

是的，我们可以。

DraggableOverlay.prototype = new google.maps.OverlayView();

DraggableOverlay.prototype.onAdd = function() {
  var container=document.createElement('div'),
      that=this;

  if(typeof this.get('content').nodeName!=='undefined'){
    container.appendChild(this.get('content'));
  }
  else{
    if(typeof this.get('content')==='string'){
      container.innerHTML=this.get('content');
    }
    else{
      return;
    }
  }
  container.style.position='absolute';
  container.draggable=true;
      google.maps.event.addDomListener(this.get('map').getDiv(),
                                       'mouseleave',
                                        function(){
          google.maps.event.trigger(container,'mouseup');
        }
      );


      google.maps.event.addDomListener(container,
                                       'mousedown',
                                   function(e){
        this.style.cursor='move';
        that.map.set('draggable',false);
        that.set('origin',e);

        that.moveHandler  = 
              google.maps.event.addDomListener(that.get('map').getDiv(),   
                                               'mousemove',
                                               function(e){
             var origin = that.get('origin'),
                 left   = origin.clientX-e.clientX,
                 top    = origin.clientY-e.clientY,
                 pos    = that.getProjection()
                               .fromLatLngToDivPixel(that.get('position')),
                 latLng = that.getProjection()
                          .fromDivPixelToLatLng(new google.maps.Point(pos.x-left,
                                                                    pos.y-top));
                 that.set('origin',e);
                 that.set('position',latLng);
                 that.draw();
            });


        }
     );

      google.maps.event.addDomListener(container,'mouseup',function(){
        that.map.set('draggable',true);
        this.style.cursor='default';
        google.maps.event.removeListener(that.moveHandler);
      });


  this.set('container',container)
  this.getPanes().floatPane.appendChild(container);
};

function DraggableOverlay(map,position,content){
  if(typeof draw==='function'){
    this.draw=draw;
  }
  this.setValues({
                 position:position,
                 container:null,
                 content:content,
                 map:map
                 });
}



DraggableOverlay.prototype.draw = function() {
  var pos = this.getProjection().fromLatLngToDivPixel(this.get('position'));
  this.get('container').style.left = pos.x + 'px';
  this.get('container').style.top = pos.y + 'px';
};

DraggableOverlay.prototype.onRemove = function() {
  this.get('container').parentNode.removeChild(this.get('container'));
  this.set('container',null)
};

它观察mousemove-event并根据距离最后一个鼠标位置的距离修改叠加层的顶部/左侧样式。

用法：

new DraggableOverlay( 
       map,//maps-instance
       latLng,//google.maps.LatLng
       'content',//HTML-String or DOMNode
       function(){}//optional, function that ovverrides the draw-method
       );

默认情况下，叠加层的左上角将放置在通过latLng - 参数提供的位置。

要应用自定义绘图，请使用构造函数的可选draw-argument。

演示：http://jsfiddle.net/doktormolle/QRuW8/

编辑：此解决方案仅适用于google maps api版本3.27。在3.28版本中，对地图的可拖动选项进行了更改。

发行说明：https://developers.google.com/maps/documentation/javascript/releases#328

我们可以在谷歌地图V3上制作可拖动的自定义叠加层

1 个答案: