如何使用谷歌地图v3制作自定义覆盖图可拖动 [英] how to make a Custom Overlays draggable using google-maps v3

问题描述

标记可以拖动，因此自定义叠加层也可以拖动，

所以如何使自定义叠加层可拖动，

thanks

解决方案

最近我在一个类似的线程上解决了这个问题，

这里是另一个堆栈溢出线程，显示如何在V3中使用可拖动对象创建自定义覆盖层

以下是工作示例：
http://www.johnmick.net/drag-div-v3/

以下是一些来源：
http://www.johnmick.net/drag-div-v3/js/main.js

为了使自定义叠加层本身可以拖动，使用jQuery UI，您可以只需使叠加层的div对象可拖放就好：

  CustomOverlay.prototype.onAdd = function（）
 {
 var div = document.createElement（DIV）; 
 div.style.border =none; 
 div.style.borderWidth =0px; 
 div.style.position =绝对; 
 div.style.visibility =visible; 
 jQuery（div）.draggable（）; //使覆盖层本身可以拖动
 this.div = div; 
 this.addPolygon（new google.maps.LatLng（46,0））; 
 this.getPanes（）。overlayLayer.appendChild（div）; 
}; 
  

the marker can drag , so the Custom Overlays can drag too ,

so how to make the Custom Overlays draggable ,

thanks

解决方案

I recently put together a solution on a similar thread that applies greatly to this question as well:

Here is the other Stack Overflow Thread Showing how to create a custom overlay in V3 with a draggable object

Here is the working example: http://www.johnmick.net/drag-div-v3/

Here is some of the source: http://www.johnmick.net/drag-div-v3/js/main.js

To make the Custom Overlay itself draggable, using jQuery UI, you would just make the div object of the overlay draggable like:

    CustomOverlay.prototype.onAdd = function()
    {
        var div = document.createElement("DIV");
        div.style.border = "none";
        div.style.borderWidth = "0px";
        div.style.position = "absolute";
        div.style.visibility = "visible";
        jQuery(div).draggable();   //Make the overlay itself draggable
        this.div = div;
        this.addPolygon(new google.maps.LatLng(46,0));
        this.getPanes().overlayLayer.appendChild(div);
    };

这篇关于如何使用谷歌地图v3制作自定义覆盖图可拖动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！