1
私はたくさんのコーディングをしませんが、私はphonegap/cordovaで実行されるコードの単純なビットであると思ったことを書こうとしました。今私がしたいのは、私を探して、私が標準的な三角形SVG Googleマーカーで移動している方向に移動/歩行/回転して回転するときに私の場所にマーカーを置くことだけです。Googleマップの回転マーカーJavascript API V3
私は実際に回転する/ベアリング/ヘッディングを理解するのに苦労しています。なぜなら、最終目的地またはポリラインがないからです。今、私はそれをうまく見つけて、地図上にマーカーを置き、細かく更新し、マーカーを中央に保持します。もちろん、私はこれにさらに多くを追加しますが、これは私が問題を抱えている部分です。私は、回転部分のコードに*** //をつけて、私が思うコードで修正しようとしています。私はおそらくそれを見出しという変数に変えますが、概念を示しています。
私の問題は、どうやってlatlngを取得するのかわかりません。私は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を介して実行されますが、firefox firebugで私はmarkerTypeErrorを取得しています：marker is null marker.setPosition（これはあなたの編集に変更する前でもupdateMarker関数の下にあります。 firefoxのこと？私はchromeが今はhttpsを必要としているので、私はphoneGapがデバッグしているとは思わないので、Firefoxをデバッグするのに使っています。 – Fixitrod
@Fixitrod任意のハイブリッドアプリケーションにはデバッグセッションがあり、wienere、またはchrome開発ツールのリモートデバッグが使用されます。 – ProllyGeek
@geocodezipハイブリッドアプリのデバッグについて教えていただきありがとうございます。あなたは私に、将来の髪の毛一トンを救った。私は主題についていくつかの研究を行い、gapdebuggerと一緒に行くことに決めました。ジオメトリライブラリを正しくロードしていないことがわかりました。あなたのコードは完璧に動作し、私が探していたものです。あなたが言ったように、それはGPSと物事の精度に依存しますが、それは私が探していたものです。結局のところ、それは水の旅行のためになるでしょう。道に沿って教えてくれてありがとう！私に教える人はいません。 – Fixitrod