1
코딩을 많이하지는 않지만 phonegap/cordova를 통해 실행되는 간단한 코드가 될 것이라고 생각하는 내용을 작성하려고했습니다. 지금 당장 내가 원하는 것은 위치 찾기, 내 위치로 이동/걷기/운전 및 표준 삼각형 SVG Google 마커로 여행하는 방향으로 회전하는 마커를 유지하는 것입니다.Google지도에서 회전 마커 Javascript API V3
나는 끝 목적지 또는 따라야 할 폴리 라인이 없으므로 회전/베어링/헤딩을 계산하는 데 어려움을 겪고 있습니다. 지금은 잘 찾아지도에 표식을 붙이고 잘 업데이트하고 마커를 중앙에 유지합니다. 물론 나는 이것에 훨씬 더 많은 것을 추가 할 것이지만 이것은 내가 문제를 겪고있는 부분이다. 내가 생각할 수있는 코드로 고치려고하는 회전 부분의 코드에 *** //을 넣습니다. 아마도 heading이라는 변수로 바꿀 것이지만 개념을 보여줄 것입니다.
내 문제는 어떻게 해야할지 모르겠다. 위치 변경을 따르기 위해 navigator.geolocation.watchPosition을 사용하고 있으므로 이전 latl을 얻는 방법을 모르겠습니다. 또한 내가 일반적으로하는 일을하는 쉬운 방법이 있다면 나는 모두 귀입니다. 나는 이것을 생각한 것 같지만 어쩌면이 모든 것을 취할 것 같아.
내 API 코드를 제거했지만이 모든 것이 그대로 작동합니다.
<!DOCTYPE html>
<html>
<head>
<title>GEOCODING TEST</title>
<style type="text/css">
html,
body {
height: 100% ;
margin: 0px 0px 0px 0px ;
overflow: hidden ;
padding: 0px 0px 0px 0px ;
width: 100% ;
}
#mapContainer {
height: 100% ;
width: 100% ;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?key={MYAPIKEY}" type=
"text/javascript">
</script>
<script src=
"http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type=
"text/javascript">
</script>
</head>
<body>
<div id="mapContainer">
</div>
<script type="text/javascript">
var mapContainer = $("#mapContainer");
map = new google.maps.Map(
mapContainer[ 0 ],
{
zoom: 15,
center: new google.maps.LatLng(
40.700683,
-73.925972
),
mapTypeId: google.maps.MapTypeId.TERRAIN
}
);
function addMarker (latitude, longitude){
var marker = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(
latitude,
longitude
),
flat: true,
icon: {
path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW,
strokeColor : 'red',
strokeWeight : 3,
scale: 6,
***//rotation: google.maps.geometry.spherical.computeHeading(from:LatLng, to:LatLng)
},
});
return(marker);
}
function updateMarker(marker, latitude, longitude, label){
marker.setPosition(
new google.maps.LatLng(
latitude,
longitude
)
);
if (label){
marker.setTitle(label);
}
}
if (navigator.geolocation) {
var locationMarker = null;
navigator.geolocation.getCurrentPosition(
function(position){
if (locationMarker){
return;
}
console.log("Initial Position Found");
locationMarker = addMarker(
position.coords.latitude,
position.coords.longitude,
"Initial Position"
);
},
function(error){
console.log("Something went wrong: ", error);
},
{
timeout: (5 * 1000),
maximumAge: (1000 * 60 * 15),
enableHighAccuracy: true
}
);
var positionTimer = navigator.geolocation.watchPosition(
function(position){
console.log("Newer Position Found");
console.log (position);
updateMarker(
locationMarker,
position.coords.latitude,
position.coords.longitude,
"Updated/Accurate Position"
);
var pos = new google.maps.LatLng(
position.coords.latitude,
position.coords.longitude);
map.setCenter(pos);
}
);
setTimeout(
function(){
// Clear the position watcher.
navigator.geolocation.clearWatch(positionTimer);
},
(1000 * 60 * 5)
);
}
</script>
<div id="map-canvas" style="width: 100%; height: 100%">
</div>
</body>
</html>
이것은 내가 찾고있는 개념이다. 나는 그것을 시도했지만 작동하지 않지만 몇 시간 동안 여러 가지를 시도한 후에 나는 이전 문제점을 발견했을 것이다. 내가 원래 게시물에 첨부 된 코드를 실행하면 phonegap을 통해 정상적으로 실행되지만 파이어 폭스 파이어 버그에서 나는 markerTypeError를 얻고있다 : marker is null marker.setPosition (이것은 편집을 변경하기 전에 updateMarker 함수 아래에있다.) 파이어 폭스 문제? 크롬에 https가 필요하고 전화 갭에 디버그가 있다고 생각하지 않기 때문에 파이어 폭스를 사용하고 있습니다. 아이디어가 있습니까? – Fixitrod
@Fixitrod 모든 하이브리드 앱에는 디버깅 세션이 있으며, wienere 또는 크롬 개발자 도구 원격 디버깅이 있습니다. – ProllyGeek
@geocodezip 하이브리드 앱의 디버깅에 대해 알려 주셔서 감사합니다. 장래의 머리카락을 떼어 놓았습니다. 주제에 대한 연구를하고 gapdebugger와 함께 가기로 결정했습니다. 기하학 라이브러리를 올바르게로드하지 못하고 있음을 발견했습니다. 코드가 완벽하게 작동하고 내가 찾던 코드입니다. 당신이 말했듯이, 그것은 GPS와 사물의 정확도에 달려 있지만 그것은 내가 찾고있는 것입니다. 궁극적으로, 그것은 물 여행을위한 것입니다. 길을 따라 나를 가르쳐 주셔서 다시 한번 감사드립니다! 나는 저를 가르 칠 사람이 없습니다. – Fixitrod