google-maps - 如何将 DOM 对象（图像）（位于外部）拖到地图中，然后在那里创建标记？

Question

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

Answer 1

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

此示例依赖jQuery UI来查找可拖动元素移动后的 Div Pixel 坐标。

使用jQuery UI - 我们将做几件事：

• 使元素可拖动
• 为元素的拖动停止时创建事件侦听器

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

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

Create Marker 将负责做一些事情：

• 接收我们的可拖动元素的左侧和顶部位置
• 计算该点的等效 GLatLng 点，同时考虑我们地图的偏移量

• 创建标记并将其添加到地图

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

我还创建了位于此处的此代码的工作示例。如果您有任何其他问题，请务必让我知道，我希望这会有所帮助！

:)