在Google地图上启用拖放的准确标记位置

时间:2012-08-06 15:37:03

标签: jquery google-maps-api-3

我有一个页面,其中包含建筑物的卫星视图和对齐的平面图覆盖图。有些图像需要与建筑物内的特定位置相关联,因此我想拖动图像,将其放在地图上并将位置数据用于其他任务。

我有这个概念在

工作
http://130.111.148.131/JMCTour/admin/setCoordinates.php?floor=1, 

但标记精度还有很多不足之处。如果您前往该站点并放置标记,则可以看到位置差异很大。无论使用

,都是如此
point = (pageX, pageY),
point = (screenX, screenY),
location = overlay.getProjection().fromDivPixelToLatLng(point),
location = overlay.getProjection().fromcontainerPixelToLatLng(point)

我的代码是

//draggable handler of each photo
$(".photo").draggable({
  helper: "clone",
  cursor: "move",
  containment: $("#photosGallery") ? $("#container") : "document"

});

//droppable handler of the map div
$("#map").droppable({
  drop: function(e){
    var point = new google.maps.Point(e.pageX, e.pageY);
    var data = {
      "location": overlay.getProjection().fromDivPixelToLatLng(point)
    };

    placeMarker(data);
  }
});

//create a new marker overlay at point
function placeMarker(location){
  var marker = new google.maps.Marker({
    position: location.location,
    map: map,
    zIndex: 1000,
    draggable: true
  });
}

我希望准确无误。虽然我可以删除位置并将其拖动到正确的位置,但在第一次放置时获得准确的位置会非常有帮助

1 个答案:

答案 0 :(得分:1)

我有一个old V2 demo here,可能对您有所帮助。当你放下标记时,它会得到精确的纬度/经度,精度为6位小数。 您的代码存在的问题是 e.pageX,e.pageY 与整个页面有关,而不仅仅与包含地图的div有关。