Ich mache nicht viel Kodierung, aber ich habe versucht zu schreiben, was ich dachte, wäre ein einfaches Stück Code, der durch phonegap/cordova durchlaufen wird. Im Moment will ich nur, dass er mich findet, halte den Marker an meinem Standort, während ich mich bewege/gehe/fahre und rotiere in die Richtung, in die ich mit einem Standarddreieck SVG Google fahre.Rotierender Marker in Google Maps Javascript API V3
Ich habe wirklich eine harte Zeit herauszufinden, die rotierenden/Peilung/Überschrift, da ich kein Endziel oder Polylinien folgen haben. Gerade jetzt habe ich es gut lokalisieren, setzen Sie den Marker auf der Karte, aktualisiert fein und behält den Marker in der Mitte. Natürlich werde ich viel mehr hinzufügen, aber das ist der Teil, mit dem ich Probleme habe. Ich habe einen *** // in den Code des Rotationsteils geschrieben, den ich mit dem Code reparieren will, von dem ich dachte, dass er funktionieren könnte. Ich werde es wahrscheinlich in eine Variable namens Überschrift umwandeln, aber es zeigt das Konzept.
Mein Problem ist, ich weiß nicht, wie man zu und von latlng. Ich benutze navigator.geolocation.watchPosition, um die Standortänderung zu verfolgen, so dass ich nicht weiß, wie ich die vorherige Position abrufen soll. Außerdem, wenn es einen einfacheren Weg gibt, das zu tun, was ich versuche zu tun, bin ich ganz Ohr. Ich habe das Gefühl, dass ich darüber nachgedacht habe, aber vielleicht braucht es das alles.
Ich habe meinen API-Code entfernt, aber ansonsten funktioniert alles so wie es ist.
<!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>
Dies ist das Konzept, das ich suche. Ich habe es versucht und es funktioniert nicht, aber nachdem ich mehrere Dinge für ein paar Stunden ausprobiert habe, habe ich vielleicht ein vorheriges Problem gefunden. Wenn ich den Code ausführen, den ich in meinem ursprünglichen Beitrag angehängt habe, läuft er gut durch phonegap, aber in firefox firebug bekomme ich markerTypeError: marker ist null marker.setPosition (. Dies ist unter der updateMarker-Funktion, noch bevor Sie Ihre Änderungen ändern. Könnte das sein eine firefox sache? Ich benutze firefox, um zu debuggen, weil chrome https jetzt braucht, und ich denke nicht, dass phoneGap debug hat. Irgendwelche Ideen? – Fixitrod
@Fixitrod jede Hybrid-App hat eine Debugging-Sitzung, verwenden Sie wienere oder Chrome-Entwickler-Tools Remote-Debugging. – ProllyGeek
@geocodezip Vielen Dank, dass Sie mich über das Debugging von Hybrid-Apps informiert haben. Du hast mir eine Menge zukünftiges Haare ziehen gerettet. Ich habe etwas zu diesem Thema recherchiert und beschlossen, mit gapdebugger zu gehen. Ich habe festgestellt, dass ich die Geometriebibliothek nicht korrekt geladen habe. Dein Code hat perfekt funktioniert und ich habe danach gesucht. Wie du gesagt hast, hängt es von der Genauigkeit der GPS und der Dinge ab, aber es ist das, wonach ich gesucht habe. Letztendlich wird es für Wasserreisen sein. Danke nochmal dafür, dass du mich auf dem Weg unterrichtet hast! Ich habe niemanden, der mich unterrichten könnte. – Fixitrod