Question

我想在你移动谷歌地图时获得LatLng积分。我在地图中添加了domListener，但是当我尝试访问event.latLng时，它返回未定义。当我尝试调用函数addPointsToArray时，变量pnt始终未定义。

我的代码是

<html>
    <body>

    <div>
       <button id="move-mode" onClick="moveMode()">Move</button>
       <button id="draw-mode" onClick="drawMode()">Draw</button>
    </div>
<script>

var map;
var points = [];
var modeType;
var bMouseDown;
var poly;

function moveMode() {
    //alert("Move Mode Clicked");
    modeType = 'move';
    if ("ontouchend" in document) {
        return;
    }
    var options = {
        draggable: true,
        panControl: true,
        scrollwheel: true
    };
    map.setOptions(options);
}

function drawMode() {
    //alert("Draw Mode Clicked");
    console.log("Draw Mode");
    modeType = 'draw';
    if ("ontouchend" in document) {
        return;
    }
    var options = {
        draggable: false,
        panControl: false,
        scrollwheel: false
    };
    map.setOptions(options);
} 

function initialize() {
    map = new google.maps.Map(document.getElementById('map'), {
        zoom: 10,
        center: new google.maps.LatLng(32.7150, -117.1625),
        disableDefaultUI: true,
        zoomControl: true,

        mapTypeControl: true,
        mapTypeControlOptions: {
            style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
            mapTypeIds: [
                google.maps.MapTypeId.ROADMAP,
                google.maps.MapTypeId.TERRAIN,
                google.maps.MapTypeId.SATELLITE
            ]
        }
    });

    bMouseDown = false;

    var polyOptions = {
        strokeWeight: 0,
        fillOpacity: 0.45,
        editable: true
    };

    google.maps.event.addDomListener(map.getDiv(), 'mousedown', function (e) {
        //do it with the right mouse-button only
        if (e.button != 1 && modeType != "draw") {
            return;
        }

        bMouseDown = true;

        //the polygon
        poly = new google.maps.Polyline({
            map: map, clickable: false
        });
        //move-listener
        var move = google.maps.event.addListener(map, 'mousemove', function (eventPoint) {
            poly.getPath().push(eventPoint.latLng);
            addPointsToArray(eventPoint.latLng);
        });
        //mouseup-listener
        google.maps.event.addListenerOnce(map, 'mouseup', function (e) {
            google.maps.event.removeListener(move);
            bMouseDown = false;
            arrayOfPoints.push(points);
            points = [];
            polylinesArray.push(poly);
            if (document.getElementById('overlay').value == 'Polygon') {
                var path = poly.getPath();
                poly.setMap(null);
                poly = new google.maps.Polygon({map: map, path: path});
                polylinesArray.push(poly);
            } else {
                polylinesArray.push(poly);
            }
        });

    });
}

function addPointsToArray(pnt) {
    if (bMouseDown == true && modeType == 'draw') {
        points.push(pnt);
        console.log(pnt);
    }
}
</script>
</body>
</html>

当我尝试向上推进点数组时，pnt始终未定义。

我是javascript和Google Maps api的新手，所以任何帮助都会感激不尽

Answer 1

您的问题不是标题中描述的问题。 eventPoint.latLng始终定义。处理arrayOfPoints以在文本框中显示它时，您正在寻找google.maps.LatLng的.latitude和.longitude属性。那些不存在，您需要使用.lat()对象的文档.lng()和google.maps.LatLng方法来获取这些值。

function createFarm() {
    document.getElementById('search-field').value = "";

    var xmlString = "";
    for (var i = 0; i < arrayOfPoints.length; ++i) {
        xmlString += '<Shape><Points>';

        var singleArrayOfPoints = arrayOfPoints[i];

        for (var j = 0; j < singleArrayOfPoints.length; ++j) {
            xmlString += "<Point><Latitude>" + singleArrayOfPoints[j].lat() + "</Latitude><Longitude>" +
                    singleArrayOfPoints[j].lng( + "</Longitude></Point>";
        }

        xmlString += "</Points></Shape>";
    }

    document.getElementById('search-field').value = xmlString;
}

proof of concept fiddle

Event.LatLng返回undefined

1 个答案: