PDA

View Full Version : Polyline geolocation



Chanckjh
6 Apr 2012, 4:40 AM
Hi,
I am trying to make an app in Sencha touch 2. I'm very new at this. This is my code.






Ext.application({
name: 'Applicatie 3.',
launch: function() {
var view = Ext.create('Ext.NavigationView', {
fullscreen: true,
items: [{
title: 'Home',
xtype: 'map',
mapOptions: { zoom: 15, },
useCurrentLocation: true,
listeners: {
maprender: function(comp, map){
var geo = Ext.create('Ext.util.Geolocation', {
frequency: 3000,
autoUpdate: true,
allowHighAccuracy: true,

listeners: {
locationupdate: function(geo) {
var route = [ ];
route.push( new google.maps.LatLng( geo.getLatitude() , geo.getLongitude() ) );


//alert( geo.getLatitude()+ ' ' + geo.getLongitude());


var polyOptions = new google.maps.Polyline({
path: route,
strokeColor: "red",
strokeOpacity: 1.0,
strokeWeight: 5
});
polyOptions.setMap(map);


var marker = new google.maps.Marker({
position: new google.maps.LatLng(geo.getLatitude(), geo.getLongitude()),
map: map
});


var infowindow = new google.maps.InfoWindow({
content: '........'
});


google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map, marker);
});
},
locationerror: function(geo, bTimeout, bPermissionDenied, bLocationUnavailable, message) {
if(bTimeout){
alert('Timeout occurred.');
} else {
alert('Error occurred.');
}
}
}
});
geo.updateLocation();


}
}
}],
});
}
});




I'm trying to create a polyline from tracking my current location. I tried to do this with push. The array in var route is adding up, but it doesnt show up in the map.And i'm also trying to make the marker follow me. It is working a little bit. The marker is placing new markers of my locations on the map, but I need to make it to follow me. Something like, place marker, 3 sec later place new marker and delete old one.Please help me. This is for a school project

mitchellsimoens
6 Apr 2012, 5:34 AM
You are recreating everything when the locationupdate event fires. The marker has a setPosition method on it that you can reuse the marker just update it's position. The polyline you need to keep the routes array (create it outside of the locationupdate event) and push new routes so that you can keep the routes but create the new polyline with it.

Chanckjh
6 Apr 2012, 6:11 AM
You are recreating everything when the locationupdate event fires. The marker has a setPosition method on it that you can reuse the marker just update it's position. The polyline you need to keep the routes array (create it outside of the locationupdate event) and push new routes so that you can keep the routes but create the new polyline with it.

Thank you for your reply!
I think I get what you are saying. The marker and polyline array needs to be outside of locationupdate and array push needs to stay inside. But how can I put marker and polyline outside? After locationupdate I need to make a new event and put the marker and polyline inside(?), but what event do I need?

mitchellsimoens
6 Apr 2012, 6:20 AM
You create the marker outside locationupdate and use setPosition within the locationupdate. You will need to create a new polyline within locationupdate.

Chanckjh
6 Apr 2012, 7:16 AM
I'm sorry but I seriously don't know how to do it...
I think I understand that this needs to be inside locationupdate.



listeners: {
locationupdate: function(geo) {


route.push( new google.maps.LatLng( geo.getLatitude() , geo.getLongitude() ) );


var markposition = geo.getLatitude()+','+geo.getLongitude() ;
marker.setPosition(markposition);


},
locationerror: function(geo, bTimeout, bPermissionDenied, bLocationUnavailable, message) {
if(bTimeout){
alert('Timeout occurred.');
} else {
alert('Error occurred.');
}
},
}




This will keep adding the latlng into the array of path. Markposition will keep changing the setposition.

But how and where can I put Polyline and Marker outside locationupdate? Does it have to be after locationupdate: function(){}? If so I need another event in the listener right?

I'm sorry if I don't understand, this is really new to me.

mitchellsimoens
6 Apr 2012, 7:23 AM
Haven't tested this but something like this:


Ext.create('Ext.NavigationView', {
fullscreen : true,
items : [
{
xtype : 'map',
title : 'Home',
useCurrentLocation : true,
mapOptions : {
zoom : 15
},
listeners : {
maprender : function(comp, map) {
var marker = new google.maps.Marker({
position : new google.maps.LatLng(geo.getLatitude(), geo.getLongitude()),
map : map
}),
route = [],
polyline,
geo = Ext.create('Ext.util.Geolocation', {
frequency : 3000,
autoUpdate : true,
allowHighAccuracy : true,
listeners : {
locationupdate : function(geo) {
var lat = geo.getLatitude(),
lng = geo.getLongitude();

route.push( new google.maps.LatLng( lat , lng ) );

marker.setPosition(lat + ',' + lng);

//need to remove the polyline
if (polyline) {
polyline.setMap(null);
}

polyline = new google.maps.Polyline({
path: route,
strokeColor: "red",
strokeOpacity: 1.0,
strokeWeight: 5
});
polyline.setMap(map);

var infowindow = new google.maps.InfoWindow({
content: '........'
});


google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map, marker);
});
},
locationerror: function(geo, bTimeout, bPermissionDenied, bLocationUnavailable, message) {
if(bTimeout){
alert('Timeout occurred.');
} else {
alert('Error occurred.');
}
}
}
});

geo.updateLocation();
}
}
}
]
});

Chanckjh
6 Apr 2012, 3:30 PM
AAaah THANK YOU!
I tweaked it a little bit and it's now working.
Is it possible to make a button to stop autoupdate?

prakseb
1 May 2013, 3:41 AM
Hallo,

I can't solve my probelm, when I use the code below in the array route the entries are (NaN, NaN) and not the coordinates.

route.push( new google.maps.LatLng( "'"+ lat + "'" + ', ' + "'"+ longt+"'" ) );

alert(route);

the output is -> (NaN,NaN)

Can somebody help me?