2014-12-08 4 views
-1

나는 도약 동작 좌표에 가장 근접한 Google지도에서 마커를 선택하려고했습니다. 나는 도약 모션 좌표를 Google지도 좌표로 변환하고 마커에 대해 marker.lat 및 marker.lng을 수행하여 도약 모션 장치에 대한 Google지도에서 가장 가까운 마커를 찾기 위해 위도 및 경도와 비교하여 시도했습니다. 그러나 화면 하단이나 화면 맨 위의 마커를 반환하는 대신 작동하지 않습니다. 다음은 현재 사용중인 javaScript 코드입니다.Google지도 및 도약 동작을 사용하여 마커 선택

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) 
} 

답변

0

도약 모션 좌표계는 브라우저 창과 관련이 없습니다. X 축은 약에서부터 확장됩니다. -300mm ~ + 300mm. Y 축은 약 0에서 + 600mm까지 확장됩니다. 또한 브라우저 Y 축의 양의 방향이 아래쪽 인 반면 양의 방향은 양의 방향입니다. 코드를 올바르게 읽으면 Leap Motion 좌표를 픽셀 좌표처럼 사용하려고합니다. 그들은 그렇지 않습니다.

도약 모션 좌표를 응용 프로그램에 적합한 것으로 매핑해야합니다. 설명서의이 문서는 도움이 될 수 있습니다. https://developer.leapmotion.com/documentation/javascript/devguide/Leap_Coordinate_Mapping.html

특히 InteractionBox 클래스에서 Leap Motion 좌표를 [0..1] 범위로 정규화 할 수 있습니다. 일반적으로 정규화 된 좌표를 응용 프로그램 좌표계에 매핑하는 것이 더 쉽습니다.