正如我在 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/