admin管理员组文章数量:1346070
I don't do a lot of coding but I have tried to write what I thought would be a simple bit of code that will be ran through phonegap/cordova. Right now all I want it to do is locate me, keep the marker on my location as I move/walk/drive and rotate in the direction I'm traveling with a standard triangle SVG Google marker.
I'm really having a tough time figuring out the rotating/bearing/heading since I don't have an end destination or poly lines to follow. Right now I have it locate fine, put the marker on the map, updates fine and keeps the marker in the center. Of course I'll add a lot more to this but this is the portion I'm having trouble with. I put a ***// in the code of the rotation part I'm trying to fix with the code I thought might work. I'll probably turn it into a variable called heading but it shows the concept.
My problem is I don't know how to get the to and from latlng. I'm using navigator.geolocation.watchPosition to follow the location change so I don't know how to get the previous latlng. Also, if there's an easier way to do what I'm trying to do in general I'm all ears. I feel like I've over thought this but maybe it does take all this.
I removed my api code but other than that this all works as is.
<!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="={MYAPIKEY}" type=
"text/javascript">
</script>
<script src=
".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.sphericalputeHeading(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>
I don't do a lot of coding but I have tried to write what I thought would be a simple bit of code that will be ran through phonegap/cordova. Right now all I want it to do is locate me, keep the marker on my location as I move/walk/drive and rotate in the direction I'm traveling with a standard triangle SVG Google marker.
I'm really having a tough time figuring out the rotating/bearing/heading since I don't have an end destination or poly lines to follow. Right now I have it locate fine, put the marker on the map, updates fine and keeps the marker in the center. Of course I'll add a lot more to this but this is the portion I'm having trouble with. I put a ***// in the code of the rotation part I'm trying to fix with the code I thought might work. I'll probably turn it into a variable called heading but it shows the concept.
My problem is I don't know how to get the to and from latlng. I'm using navigator.geolocation.watchPosition to follow the location change so I don't know how to get the previous latlng. Also, if there's an easier way to do what I'm trying to do in general I'm all ears. I feel like I've over thought this but maybe it does take all this.
I removed my api code but other than that this all works as is.
<!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./maps/api/js?key={MYAPIKEY}" type=
"text/javascript">
</script>
<script src=
"http://ajax.googleapis./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.puteHeading(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>
2 Answers
Reset to default 8Since it is really hard to predict the future, if you don't have a real time heading from the GPS device, use the previous point and the updated point. That won't be particularly accurate if it isn't moving (or isn't moving fast enough).
function updateMarker(marker, latitude, longitude, label) {
var prevPosn = marker.getPosition();
marker.setPosition(
new google.maps.LatLng(
latitude,
longitude
)
);
marker.setIcon({
path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW,
strokeColor: 'red',
strokeWeight: 3,
scale: 6,
rotation: google.maps.geometry.spherical.puteHeading(prevPosn, marker.getPosition())
})
if (label) {
marker.setTitle(label);
}
}
There is a google library created for this purpose, and it is called Geometry Libray.
A set of Navigation functions is included in this library and will help you very much with calculating distances, heading..etc.
You can find a clear example here:
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: {lat: 34, lng: -40.605}
});
map.controls[google.maps.ControlPosition.TOP_CENTER].push(
document.getElementById('info'));
marker1 = new google.maps.Marker({
map: map,
draggable: true,
position: {lat: 40.714, lng: -74.006}
});
marker2 = new google.maps.Marker({
map: map,
draggable: true,
position: {lat: 48.857, lng: 2.352}
});
var bounds = new google.maps.LatLngBounds(
marker1.getPosition(), marker2.getPosition());
map.fitBounds(bounds);
google.maps.event.addListener(marker1, 'position_changed', update);
google.maps.event.addListener(marker2, 'position_changed', update);
poly = new google.maps.Polyline({
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 3,
map: map,
});
geodesicPoly = new google.maps.Polyline({
strokeColor: '#CC0099',
strokeOpacity: 1.0,
strokeWeight: 3,
geodesic: true,
map: map
});
update();
}
That polyline is a virtual line that connects the departure, and destination points.
本文标签： Rotating marker in Google Maps Javascript API V3Stack Overflow
版权声明：本文标题：Rotating marker in Google Maps Javascript API V3 - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1743820110a2544636.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论