Question

我正在使用Google Maps Drawing Manager点击不同的点来绘制多边形。使用此示例：http://gmaps-samples-v3.googlecode.com/svn/trunk/drawing/drawing-tools.html

drawingManager = new google.maps.drawing.DrawingManager({
          drawingMode: google.maps.drawing.OverlayType.POLYGON,
          markerOptions: {
            draggable: true
          },
          polylineOptions: {
            editable: true
          },
          rectangleOptions: polyOptions,
          circleOptions: polyOptions,
          polygonOptions: polyOptions,
          map: map
        });

        google.maps.event.addListener(drawingManager, 'overlaycomplete', function(e) {
            if (e.type != google.maps.drawing.OverlayType.MARKER) {
            // Switch back to non-drawing mode after drawing a shape.
            drawingManager.setDrawingMode(null);
            console.log('Overlay complete!!!');
            // Add an event listener that selects the newly-drawn shape when the user
            // mouses down on it.
            var newShape = e.overlay;
            newShape.type = e.type;
            google.maps.event.addListener(newShape, 'click', function() {
              setSelection(newShape);
            });

            setSelection(newShape);
          }
        });

        // Clear the current selection when the drawing mode is changed, or when the
        // map is clicked.
        google.maps.event.addListener(drawingManager, 'drawingmode_changed', clearSelection);
        google.maps.event.addListener(map, 'click', clearSelection);
        google.maps.event.addDomListener(document.getElementById('delete-button'), 'click', deleteSelectedShape);

我想要做的是每次点击鼠标在地图上创建一个点时都会收到click事件，我希望得到lat和{{点击地图上点击的点。这可能吗？

或者，或者，我可以在创建多边形之后导出所有点lat和lon吗？

Answer 1

是的可能，请参阅下文

var lat, lng; //global variables

function initialize() {
    ...
    ...


    //add these lines to capture latitude and longitude
    google.maps.event.addDomListener(document.getElementById('map'), 'mousemove', function(event) {

        var ll = overlay.getProjection().fromContainerPixelToLatLng(
                            new google.maps.Point(event.clientX, event.clientY));

        lat = ll.lat();
        lng = ll.lng();

        console.log(ll.lng() +", "+ll.lat());

    }); 
    ...
    ...
}

现在在点击事件或其他地方使用这些纬度（纬度）和经度（lng）变量：）

Answer 2

浏览器中的JavaScript是事件drive，javascript通过生成事件来响应交互，并期望程序listen发生有趣的事件。诸如“点击”鼠标事件之类的用户事件将从DOM传播到Google Maps JavaScript API。

在某些事件中，将为这些事件注册JavaScript事件侦听器，并在收到这些事件时通过调用addListener()来注册对象上的事件处理程序来执行代码。

以下是如何实现click事件监听器的示例代码段：

function initMap() {
var mapDiv = document.getElementById('map');
var map = new google.maps.Map(mapDiv, {
zoom: 8,
center: new google.maps.LatLng(-34.397, 150.644)
});

// We add a DOM event here to show an alert if the DIV containing the
// map is clicked.
google.maps.event.addDomListener(mapDiv, 'click', function() {
window.alert('Map was clicked!');
});
}

Answer 3

在形状完成后我能够获得所有坐标：

var vertices = selectedShape.getPath();
for (var i =0; i < vertices.getLength(); i++) {
    var xy = vertices.getAt(i);
    xy.lat();// Latitude
    xy.lng();// Longitude
 }

Google地图绘图管理器获取点击点的位置

3 个答案: