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

Question

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

如何使用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-argument 提供的位置.

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

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

编辑:此解决方案仅适用于谷歌地图API的3.27版本.在3.28版本中,对地图的可拖动选项进行了更改.

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