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

问题描述

标记是可拖动的，但我不能在标记上有一个自定义 div，它会在悬停点击等时发生变化.因此我想使用自定义叠加，但我无法确定自定义叠加是否支持拖动.这个已经有答案了，但是demo本身不行，

The markers are draggable, but I cannot have a custom div on a marker which changes on hover click etc. hence I thought of using custom overlays, but I am not able to find out if custom overlay support drag. There is already an answer to this, but the demo itself does not work,

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

在overlayView 类的代码参考中没有找到任何内容.

I didn't find anything on code reference for overlayView class.

推荐答案

是的，我们可以.

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 事件并根据与最后一个鼠标位置的距离修改叠加层的顶部/左侧样式.

It observes the mousemove-event and modifies the top/left-style of the overlay based on the distance from the last mouse-position.

用法:

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

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

The top-left-corner of the overlay by default will be placed at the position provided via the latLng-argument.

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

To apply a custom drawing use the optional draw-argument of the constructor .

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

此解决方案仅适用于 3.27 版的 google maps api.在 3.28 版本中，地图的可拖动选项发生了变化.

This solution will only work up to version 3.27 of the google maps api.Within the release of 3.28 there were changes made on the draggable option of the map.

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

这篇关于我们可以在谷歌地图 V3 上制作可拖动的自定义叠加层吗的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！