javascript - Event.LatLng 返回未定义

标签 javascript google-maps google-maps-api-3

当您在 Google map 上移动时,我正在尝试获取 LatLng 点。我已将 domListener 添加到我的 map 中,但是当我尝试访问 event.latLng 时,它返回未定义。当我尝试调用函数 addPointsToArray 时,变量 pnt 始终未定义。

fiddle

我的代码是

<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 的新手,因此任何帮助将不胜感激

最佳答案

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

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

关于javascript - Event.LatLng 返回未定义,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33682612/

相关文章:

javascript - 添加元素动态后的JQuery绑定(bind)事件

ios - 我如何在 iOS Swift 中通过聚类解析自定义标记图标

javascript - 如何添加自定义 Controller 而不在谷歌地图中添加附加图层?

javascript - 谷歌地图 API v3 : MarkerWithLabel not showing until zoom

javascript - 查找与添加的客户服务应用程序中的新标记最接近的标记

javascript - 使用可滚动的 div 时 IE 9 中的鼠标悬停错误?

javascript - 在 Backbone 中有条件地绑定(bind)事件 - 移动或桌面

javascript - Dropbox 与 UI5 集成

javascript - 如何在 Google map 中正确使用复杂的 SVG 图像路径

javascript - 在大网格上平滑滚动图像 block ?