【问题标题】:Positioning a draggable map marker at top-left of map window在地图窗口的左上角放置一个可拖动的地图标记
【发布时间】:2014-02-01 00:30:53
【问题描述】:

我有一个谷歌地图,我可以用它来让人们推荐位置。目前,我使用用

创建的 LatLng 在地图中心放置一个可拖动的标记

myPosition = frmMap.getCenter();

不过,我想做的是最初将其放置在地图边缘的某个位置,可能直接在缩放控件下方(与您在缩放控件上方看到黄色街景人的方式不同)。

我已经寻找解决方案,但没有提出任何建议。我唯一的想法是根据 Center 和 NortEast 进行一些数学运算,但如果可能的话,我宁愿根据像素获得一个绝对位置?

【问题讨论】:

  • hm..只是一个小问题,您是否禁用了地图上的平移和缩放功能?因为我看到它的方式,即使你在控件下放置带有 latlng 的标记,如果你在地图中平移/缩放它仍然会移动..

标签: google-maps google-maps-api-3 google-maps-markers


【解决方案1】:

正如我在 cmets 中提到的,计算 latlng 值以将标记放置在缩放控件下不仅很麻烦,而且如果用户开始在地图中平移/缩放(作为标记将移动到latlng 的任何位置)。

我的建议是使用 Maps API 提供的 Drawing Library。这基本上为您提供了一个绘图控件,以向地图添加标记(其他叠加层也是可能的:圆、多边形、折线、矩形)。就像谷歌地图提供的任何控制一样,您可以将它们严格定位在您想要的任何位置 - 通过在选项中进行设置。下面的 sn-p 描述了如何初始化绘图库:

var drawingManager = new google.maps.drawing.DrawingManager({
    drawingControlOptions: {
        position: google.maps.ControlPosition.LEFT_BOTTOM,
        drawingModes: [
            google.maps.drawing.OverlayType.MARKER
        ]
    }
});

drawingManager.setMap(map);

这为您提供绘图控制,启用Marker 模式,并将其绑定到您的地图对象。

然后,您可以通过在drawingManager 变量上为markercomplete 事件添加侦听器来侦听何时添加了标记。然后在回调中就可以得到添加标记的位置,下面的sn-p演示了这个:

google.maps.event.addListener(drawingManager, 'markercomplete', function (marker) {
    var position = marker.getPosition();        
});

如果您希望看到它的实际效果,我会在此示例中创建一个小的 jsfiddle。另外,点击here获取地图API绘图库的完整参考。

编辑:(在地图加载时添加标记开始模式,添加标记后隐藏绘图控件,制造商标记可拖动)

要启动绘图模式以在地图加载时添加标记,只需在 drawingManager 变量声明中设置 drawingMode 选项:

`drawingMode : google.maps.drawing.OverlayType.MARKER`

您可以在markercomplete事件监听器中隐藏绘图控件:

// To hide:
drawingManager.setOptions({
    drawingControl: false //changes UI back to regular map interactions
});
drawingManager.setDrawingMode(null); //hides controls

或者,如果您以后在客户端交互中不再需要绘图控件,您可以通过以下方式将其从地图中删除:

drawingManager.setMap(null);

然后要使marker 可拖动,只需在侦听器中设置选项(因为回调函数中的marker 无论如何都是谷歌地图标记对象 - 它引用添加到地图中的标记)。

marker.setOptions({
    draggable: true
});

然后,您可以在标记对象上为dragend 事件添加一个侦听器,以跟踪对位置的更改。

这里是更新的小提琴:http://jsfiddle.net/svigna/J5zMg/3/

【讨论】:

  • 感谢 Suvi,这真的很有用,看起来不错。也感谢 jsFiddle。尽管您认为添加一个行为有多容易,以便一旦单击绘图管理器中的图钉,新图钉就会直接出现在地图上,然后用户可以拖动它以便能够微调位置?我觉得这是一种更直观的行为。我也想自动停止绘图,这样就不能再添加针脚了,然后完全去掉停止绘图按钮。
  • 对不起,只是更深入地阅读文档。我可以看到我可以让它以绘图模式启动,但我认为不可能删除手形图标。也许它可以被编码为在创建标记后立即退出绘图模式?
  • 是的,这绝对是可能的(减去隐藏手形图标部分)。将相应地更新我的答案。
  • 这是一个令人讨厌的 hack,但这会在您的控件中隐藏“手”图标:google.maps.event.addListenerOnce(map, 'idle', function(){ $('div[title="Stop drawing"]').css('visibility', 'hidden'); });
  • Suvi,太好了,谢谢。事实上,我更进一步并更改了绘图管理器选项,使其根本不显示 - 请参阅jsfiddle.net/J5zMg/5。为了回答你的问题,一旦标记被定位,我就不需要用户使用绘图控件,这样它们就可以在那时完全删除(尽管我想如果它们被隐藏的话,留下它们并没有什么害处)。标记位置在允许用户提交位置的表单上填充 lat/lng 输入。无论如何,非常感谢您的帮助。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2016-08-11
  • 2012-05-30
  • 2011-10-14
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多