拖放Google地图标记

时间:2016-03-04 10:24:22

标签: javascript jquery google-maps drag-and-drop

我制作了一个拖放功能,以便用户可以从侧边栏拖动图标,当他们 放置 图标时,会放置一个标记。< / p>

以下实现似乎是实现它的最佳(唯一)方法,但是当网络速度很慢时会发生问题,可能是因为来自鼠标悬停事件的lat / lng(非常)不准确。

任何人都可以提供替代方法吗?也许立即放置标记,然后使用内置的地图拖放?

function placeMarker(lat, lng) {
  var marker = new google.maps.Marker({
    position: new google.maps.LatLng(lat, lng),
    draggable: true,
    map: map
  });
  return marker;
}

$(".icon").draggable({helper: 'clone',

  start: function(e, ui) {
    map.setOptions({draggable: false});
    $("#map").css('cursor', 'crosshair');
  },

  stop: function(e,ui) {
    map.setOptions({draggable: true});
    $("#map").css('cursor', 'default');

    google.maps.event.addListenerOnce(map, "mouseover", function(event) {
      var lat = event.latLng.lat(),
          lng = event.latLng.lng(),
          id = ui.helper.context.id;

      pointA = id === "pointA" && pointA === true 
                       ? pointA.setMap(null) : placeMarker(lat, lng); 

      pointB = id === "pointB" && pointB === true 
                       ? pointB.setMap(null) : placeMarker(lat, lng);
    });
  }
});

1 个答案:

答案 0 :(得分:1)

使用mousemove事件而不是mouseover时,问题已得到解决。

我认为这是我应该一直使用的事件。低延迟显然会干扰初始mouseover事件,因为引脚被丢弃而不会触发。

希望这可以帮助别人。