我们可以在谷歌地图 V3 上拖动自定义叠加层吗?

Question

标记

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

如何使用谷歌地图 v3 使自定义叠加层可拖动

我在覆盖视图类的代码参考上没有找到任何内容。

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)
};

它观察鼠标移动事件，并根据与最后一个鼠标位置的距离修改叠加层的上/左样式。

---

用法：

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

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

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

---

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

---

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

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