我們可以在谷歌地圖上製作自定義疊加層可拖動嗎V3

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

據觀察鼠標移動事件和修改基於從上次鼠標位置的距離覆蓋層的頂部/左風格。

---

用法：

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

默認覆蓋的左上角將被放置在經由latLng -argument提供的位置。

要應用自定義繪圖，請使用構造函數的可選繪圖參數。

---

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

---

編輯： 該解決方案將只工作到谷歌地圖API的3.27版本。 在3.28版本中，對地圖的可拖動選項進行了更改。

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