Выберите маркер с помощью Google Maps и прыгайте движения

Question

Я пытался выбрать маркер на картах Google, ближайший к прыжковой координате движения. Я попытался преобразовать координату прыжкового движения в координату карт Google и найти ближайший маркер на картах Google для устройства прыжкового движения, выполнив marker.lat и marker.lng для маркеров по сравнению с рассчитанными широтой и долготой. Однако он не работает, вместо этого он возвращает маркер внизу экрана или вверху экрана. Вот мой текущий код javaScript.

 var results = document.getElementById('resultsTable');
    console.log("Key Tap Gesture at: " + keyTapGesture.position[0]);
   //google.maps.event.dispatchEvent(ktEvent);
    var closestMarkerDistance = 10000000000000000000000000; //big number to start, so any calculation will override this value
var closestMarker = null;
var distance = 10000000000000000000000000;
console.log("marker distances to keytap are: " + results.length);

var hand = frame.hands[0];
var stabilized = hand.stabilizedPalmPosition;



for (var i = 0; i < markers.length; i++) {
    var markerPos = 0;
    var keyTapX = 0;
    var keyTapY = 0;
    var newLatLngPt = 0;
    var keyLng = 0;
    var keyLat = 0;
    markerPos = markers[i].position;
    keyTapX = stabilized[0];
    keyTapY = stabilized[1];
    newLatLngPt = convertToLatLng(keyTapX, keyTapY);
    var scaling = 4.0 / Math.pow(2, map.getZoom() - 1);
    keyLng = keyTapX * scaling;
    keyLat = keyTapY * scaling;
    //var keyTapCoord = new google.maps.LatLng(keyLat, keyLng);
    distance = getDistanceFromLatLonInKm(markerPos.lat(), markerPos.lng(), newLatLngPt.lat(), newLatLngPt.lng());
    if (distance < closestMarkerDistance) {
        closestMarkerDistance = distance;
        closestMarker = markers[i];
    }
    console.log(" \n" + distance + markers[i].getTitle());
}
if(closestMarker != null) {
    console.log("\nclosest marker is : " + closestMarker.name + " title: " + closestMarker.getTitle() + " at pos: " + closestMarker.getPosition());
    infowindow.setContent(closestMarker.getTitle());
    infowindow.open(map,closestMarker);
    console.log("\n ALSO: --> " + stabilized[0] + " ::::::" + stabilized[1]);
    console.log("\n ANNNNNND: --> " + keyLng + " ::::::" + keyLat + "and then real la/lo = " + markerPos.lng() + " ____ " + markerPos.lat());
    //document.getElementById(choices).innerHTML = place.name + "<br/>" + place.vicinity;
}
else {
    console.log("\nclosest marker Does Not Exist");
}




function getDistanceFromLatLonInKm(lat1, lon1, lat2, lon2) {
    var R = 6371; // Radius of the earth in km
    var dLat = deg2rad(lat2 - lat1);  // deg2rad below
    var dLon = deg2rad(lon2 - lon1);
    var a =
            Math.sin(dLat / 2) * Math.sin(dLat / 2) +
            Math.cos(deg2rad(lat1)) * Math.cos(deg2rad(lat2)) *
            Math.sin(dLon / 2) * Math.sin(dLon / 2)
        ;
    var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
    var d = R * c; // Distance in km
    return d;
}

function convertToLatLng(x, y) {
    // retrieve the lat lng for the far extremities of the (visible) map
    var latLngBounds = map.getBounds();
    var neBound = latLngBounds.getNorthEast();
    var swBound = latLngBounds.getSouthWest();

    // convert the bounds in pixels
    var neBoundInPx = map.getProjection().fromLatLngToPoint(neBound);
    var swBoundInPx = map.getProjection().fromLatLngToPoint(swBound);

    // compute the percent of x and y coordinates related to the div containing the map; in my case the screen
    var procX = x / window.innerWidth;
    var procY = y / window.innerHeight;

    // compute new coordinates in pixels for lat and lng;
    // for lng : subtract from the right edge of the container the left edge,
    // multiply it by the percentage where the x coordinate was on the screen
    // related to the container in which the map is placed and add back the left boundary
    // you should now have the Lng coordinate in pixels
    // do the same for lat
    var newLngInPx = (neBoundInPx.x - swBoundInPx.x) * procX + swBoundInPx.x;
    var newLatInPx = (swBoundInPx.y - neBoundInPx.y) * procY + neBoundInPx.y;

    // convert from google point in lat lng and have fun :)
    var newLatLng = map.getProjection().fromPointToLatLng(new google.maps.Point(newLngInPx, newLatInPx));

    return newLatLng;
}


function deg2rad(deg) {
    return deg * (Math.PI / 180)
}

Answer 1

Система координат Leap Motion не имеет ничего общего с окном вашего браузера. Ось X простирается от ок. От -300мм до +300мм. Ось Y простирается от 0 до +600 мм - она ​​также является положительной вверх, в то время как ось Y вашего браузера является более положительной вниз. Если я правильно прочитал ваш код, вы пытаетесь использовать координаты Leap Motion, как если бы они были пиксельными координатами. Это не так.

Вам необходимо сопоставить координаты Leap Motion с тем, что имеет смысл для вашего приложения. Эта статья в документации может помочь: https://developer.leapmotion.com/documentation/javascript/devguide/Leap_Coordinate_Mapping.html

В частности, взгляните на класс InteractionBox, с помощью которого вы можете нормализовать координаты Leap Motion в диапазоне [0..1]. Как правило, проще сопоставить нормализованные координаты с вашей системой координат приложения.