1
我不做很多編碼，但我試圖寫出我認爲是簡單的代碼，它將通過phonegap/cordova運行。現在我想要它做的就是找到我，在我移動/步行/驅動器時將標記放在我的位置上，然後沿標準三角形SVG Google標記行進的方向旋轉。谷歌地圖Javascript API中的旋轉標記V3
因爲我沒有最終目的地或多條線，我真的很難搞清楚旋轉/軸承/航向。現在我把它定位好，把標記放在地圖上，更新得很好，並保持標記在中心。當然，我會爲此添加更多，但這是我遇到麻煩的部分。我在代碼中加入了一個*** //我試圖用我認爲可以工作的代碼來修復代碼。我可能會把它變成一個稱爲標題的變量，但它顯示了這個概念。
我的問題是我不知道如何獲取和從latlng。我使用navigator.geolocation.watchPosition來跟蹤位置變化，所以我不知道如何獲取之前的latlng。另外，如果有一種更簡單的方法來做我一般都想做的事情，我全都聽過。我覺得我過度思考這個問題，但也許這確實需要所有這些。
我刪除了我的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是null marker.setPosition（。這是在更改編輯之前的updateMarker函數下。一個Firefox的東西？我使用Firefox進行調試，因爲Chrome現在需要https，我不認爲phoneGap有調試任何想法？ – Fixitrod
@Fixitrod任何混合應用程序都有調試會話，使用wienere或chrome開發人員工具遠程調試。 – ProllyGeek
@geocodezip感謝您讓我瞭解混合應用程序的調試。你爲我挽回了一大堆未來的頭髮。我對這個問題做了一些研究，決定和gapdebugger一起去。我發現我沒有正確加載幾何庫。你的代碼工作完美，這就是我一直在尋找的。就像你說的，這取決於gps和東西的準確性，但這正是我所尋找的。最終，它將用於水上旅行。再次感謝您一路教我！我沒有人教我。 – Fixitrod