google-maps - 如何将 DOM 对象(图像)(在 之外)拖到 map 中，然后在那里创建标记？

Question

我只想添加一些列在 map 旁边的标记，然后用户可以将它们拖入 map 。我尝试使用 GEvent.addDomListener(domObj, "drag",functName);但它没有用。有没有办法做到这一点？
谢谢
道

Answer 1

我不确定您是否在使用 jQuery UI或者不，但我建议使用这个库，因为它将简化创建可拖动 DOM 元素和查找元素位置的过程。

此示例依赖于 jQuery UI找到可拖动元素移动后的 Div 像素坐标。

使用 jQuery UI - 我们要做几件事:

使元素可拖动

当元素的拖动停止时创建一个事件监听器

一旦元素移动到另一个名为“createMarker”的函数，我们将在其中创建标记，传递元素的位置

 $("#dragMe").draggable({
     stop:function(event,ui){
          window.createMarker(ui.position);
     }
 });

Create Marker 将负责做几件事情:

接收可拖动元素的 Left 和 Top 位置

计算该点的等效 GLatLng 点，同时考虑 map 的偏移

创建标记并将其添加到 map

        function createMarker(position)
        {
            //Adjust Offset
            var offset = {
                    left:10,
                    top:-5
            }

               //Create a new GPoint
               var myGPoint = new GPoint(
                   position.left+offset.left,
                   position.top+offset.top
               );

               //Calculate the LatLng for this point
               var myLatLng = map.fromDivPixelToLatLng(myGPoint);

               //Create the Marker and add it to the Map
               var marker = new GMarker(myLatLng);
               map.addOverlay(marker);
            }

我还创建了此代码的工作示例 located here .如果您有任何其他问题，请务必告诉我，我希望这会有所帮助!

:)