What I want to achieve -
I have 2 variables - Latitude & Longitude, and both are updating in the background. I want to draw a line as per the variables are updating.
What I'm thinking -
Create an array path.
Create the line.
Update the path of the line using setInterval
The Code -
var poly;
function initialize() {
var Latitude
var Longitude
Latitude= {code that updates}
Longitude= {code that updates}
//create map
var mapOptions = {
zoom: 8,
}
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var path = [];
poly = new google.maps.Polyline({
path: path,
geodesic: true,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 2
});
poly.setMap(map);
var myVar = setInterval(function(){updateposition()},2000);
function updateposition(){
path.push(new google.maps.LatLng(Latitude,Longitude));
}
}
Problem - No line is appearing at all :(
You need to update the path property of the polyline (poly.setPath(path)) after updating the path. Looking closer at your code, I am not sure how you expect Latitude and Longitude to update where they are (local to the initialize function).
function updateposition(){
path.push(new google.maps.LatLng(Latitude,Longitude));
poly.setPath(path);
}
here is an example that updates the polyline from computed coordinates based on the time
var poly;
var Latitude = null;
var Longitude = null;
var map = null;
var path = [];
function initialize() {
//create map
var mapOptions = {
zoom: 2,
center:new google.maps.LatLng(0,0)
}
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
poly = new google.maps.Polyline({
path: path,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 2
});
poly.setMap(map);
var myVar = setInterval(function(){updateposition()},2000);
}
function updateposition(){
var date = new Date();
var time = date.getMinutes()*60+date.getSeconds();
Latitude= 45*Math.sin((time-1800)*Math.PI/1800.0)
Longitude= (time/10)-180;
path.push(new google.maps.LatLng(Latitude,Longitude));
if (path.length == 1) {
map.setCenter(path[0]);
map.setZoom(8);
} else {
map.setCenter(path[path.length-1]);
}
poly.setPath(path);
}
google.maps.event.addDomListener(window, 'load', initialize);
Related
I was trying to send json array from my web into an arraylist in a class with volley libarary
Here is array that i want to be filled
i want to replace dummy data in function getBestSelling() with data from web
Filename = DummyDataSource.kt (it is just plain kotlin class)
fun getBestSelling(): Observable<ArrayList<ProductEntity>> {
val dummy1 = ProductEntity(name = "Bell Pepper Red", description = "1kg, Priceg",
price = 20000,
picture = R.drawable.iv_pepper_red,
id = 5
)
val dummy2 = ProductEntity(name = "Beef bone", description = "1kg, Priceg",
price = 25000,
picture = R.drawable.iv_beef_bone,
id = 6
)
val dummy3 = ProductEntity(name = "Boiler Chicken", description = "1kg, Priceg",
price = 15000,
picture = R.drawable.iv_boiler_chicken,
id = 7
)
val dummy4 = ProductEntity(name = "Ginger", description = "250gm, Priceg",
price = 22000,
picture = R.drawable.iv_ginger,
id = 4
)
val data = listOf(dummy1, dummy2, dummy3, dummy4)
return Observable.just(ArrayList(data))
}
Here are what i do to get array filled
fun getBestSelling(): Observable<ArrayList<ProductEntity>> {
var url:String="http:// 192.168.56.1/toko-online/mobile/pro_kategori.php"
var rq : RequestQueue = Volley.newRequestQueue(this)
var data = ArrayList<ProductEntity>()
var js = JsonArrayRequest(Request.Method.GET,url,null, Response.Listener{ response ->
for (x in 0..response.length()-1){
data.add(ProductEntity(response.getJSONObject(x).getInt("id"),
response.getJSONObject(x).getInt("id"),response.getJSONObject(x).getString("name"),
response.getJSONObject(x).getString("url"),response.getJSONObject(x).getString("description"),
response.getJSONObject(x).getInt("price"),response.getJSONObject(x).getInt("stock"),
response.getJSONObject(x).getInt("category_id")))
}
}, Response.ErrorListener { error ->
Toast.makeText(this,error.message,Toast.LENGTH_LONG).show()
})
rq.add(js)
return Observable.just(data)
}
The error come from line " var rq : RequestQueue = Volley.newRequestQueue(this)"
it says
"Type mismatch: inferred type is DummyDataSource but Context! was expected"
so i copied this code
fun getdata(): Observable<ArrayList<ProductEntity>> {
var url:String="http:// 192.168.56.1/toko-online/mobile/pro_kategori.php"
var rq : RequestQueue = Volley.newRequestQueue(this)
var data = ArrayList<ProductEntity>()
var js = JsonArrayRequest(Request.Method.GET,url,null, Response.Listener{ response ->
for (x in 0..response.length()-1){
data.add(ProductEntity(response.getJSONObject(x).getInt("id"),
response.getJSONObject(x).getInt("id"),response.getJSONObject(x).getString("name"),
response.getJSONObject(x).getString("url"),response.getJSONObject(x).getString("description"),
response.getJSONObject(x).getInt("price"),response.getJSONObject(x).getInt("stock"),
response.getJSONObject(x).getInt("category_id")))
}
}, Response.ErrorListener { error ->
Toast.makeText(this,error.message,Toast.LENGTH_LONG).show()
})
rq.add(js)
return Observable.just(data)
}
into oncreate in the main activity. But because of that i cant fill array within getBestSelling() in DummyDataSource.kt because the function getdata() only return data to oncreate
Is there any way to make data go to getBestSelling() in DummyDataSource.kt ?
Move your function back out of onCreate and replace "this" with a context reference (requreContext() or create a Context var in onCreate to reference)
I wrote it in one of the hmi design programs. It´s IoT software.
After connecting with the source (my fall Siemens Logo 8) - PLC hardware, I get the ReferenceError, when I click on every button. These are my triggers to fire up the function. They are connected to start the animation.
What should I change to get rid of this errors?
Thanks,
RJ
var TUP= function fAUFmachen() {
var animateAUF2 = LeitstandSCHENKERRadeburg.getElementById('animateAUF2');
var animateAUF3 = LeitstandSCHENKERRadeburg.getElementById('animateAUF3');
var animateAUF4 = LeitstandSCHENKERRadeburg.getElementById('animateAUF4');
var animateAUF5 = LeitstandSCHENKERRadeburg.getElementById('animateAUF5');
var animateAUF6 = LeitstandSCHENKERRadeburg.getElementById('animateAUF6');
var animateAUF7 = LeitstandSCHENKERRadeburg.getElementById('animateAUF7');
var animateAUF8 = LeitstandSCHENKERRadeburg.getElementById('animateAUF8');
var animateAUF9 = LeitstandSCHENKERRadeburg.getElementById('animateAUF9');
animateAUF2.beginElement();
animateAUF3.beginElement();
animateAUF4.beginElement();
animateAUF5.beginElement();
animateAUF6.beginElement();
animateAUF7.beginElement();
animateAUF8.beginElement();
animateAUF9.beginElement();
}
var TDOWN= function fZUmachen() {
var animateZU2 = LeitstandSCHENKERRadeburg.getElementById('animateZU2');
var animateZU3 = LeitstandSCHENKERRadeburg.getElementById('animateZU3');
var animateZU4 = LeitstandSCHENKERRadeburg.getElementById('animateZU4');
var animateZU5 = LeitstandSCHENKERRadeburg.getElementById('animateZU5');
var animateZU6 = LeitstandSCHENKERRadeburg.getElementById('animateZU6');
var animateZU7 = LeitstandSCHENKERRadeburg.getElementById('animateZU7');
var animateZU8 = LeitstandSCHENKERRadeburg.getElementById('animateZU8');
var animateZU9 = LeitstandSCHENKERRadeburg.getElementById('animateZU9');
animateZU2.beginElement();
animateZU3.beginElement();
animateZU4.beginElement();
animateZU5.beginElement();
animateZU6.beginElement();
animateZU7.beginElement();
animateZU8.beginElement();
animateZU9.beginElement();
}
var LE1UP= function LE1UPmachen() {
var LE1animateUP = LeitstandSCHENKERRadeburg.getElementById('LE1animateUP');
LE1animateUP.beginElement();
}
var LE1DOWN= function LE1DOWNmachen() {
var LE1animateDOWN = LeitstandSCHENKERRadeburg.getElementById('LE1animateDOWN');
LE1animateDOWN.beginElement();
}
var LE2UP= function LE2UPmachen() {
var LE2animateUP = LeitstandSCHENKERRadeburg.getElementById('LE2animateUP');
LE2animateUP.beginElement();
}
var LE2DOWN= function LE2DOWNmachen() {
var LE2animateDOWN = LeitstandSCHENKERRadeburg.getElementById('LE2animateDOWN');
LE2animateDOWN.beginElement();
}
var LAUP= function LAUPmachen() {
var LAanimateUP = LeitstandSCHENKERRadeburg.getElementById('LAanimateUP');
LAanimateUP.beginElement();
}
var LADOWN= function LADOWNmachen() {
var LAanimateDOWN = LeitstandSCHENKERRadeburg.getElementById('LAanimateDOWN');
LAanimateDOWN.beginElement();
}
var ULUP= function ULUPmachen() {
var ULanimateUP = LeitstandSCHENKERRadeburg.getElementById('ULanimateUP');
ULanimateUP.beginElement();
}
var ULDOWN= function ULDOWNmachen() {
var ULanimateDOWN = LeitstandSCHENKERRadeburg.getElementById('ULanimateDOWN');
ULanimateDOWN.beginElement();
}
var AUP= function AUPmachen() {
var AanimateUP = LeitstandSCHENKERRadeburg.getElementById('AanimateUP');
AanimateUP.beginElement();
}
var ADOWN= function ADOWNmachen() {
var AanimateDOWN = LeitstandSCHENKERRadeburg.getElementById('AanimateDOWN');*/
AanimateDOWN.beginElement();
}
fAUFmachen();
fZUmachen();
LE1UPmachen();
LE1DOWNmachen();
LE2UPmachen();
LE2DOWNmachen();
LAUPmachen();
LADOWNmachen();
ULUPmachen();
ULDOWNmachen();
AUPmachen();
ADOWNmachen();
TUPmachen();
TDOWNmachen();
Your code calls
LE1DOWNmachen()
But the only function definition that contains that label is this:
var LE1DOWN= function LE1DOWNmachen() {
var LE1animateDOWN = LeitstandSCHENKERRadeburg.getElementById('LE1animateDOWN');
LE1animateDOWN.beginElement();
}
But this code is not defining a function called LE1DOWNmachen(). It is actually equivalent to this:
var LE1DOWN = function() {
var LE1animateDOWN = LeitstandSCHENKERRadeburg.getElementById('LE1animateDOWN');
LE1animateDOWN.beginElement();
}
The LE1DOWNmachen is meaningless here. It is being ignored. To invoke this function, you need to call
LE1DOWN();
Demo:
var LE1DOWN = function LE1DOWNmachen() {
console.log("Here!");
}
// This works
LE1DOWN();
// But this throws a reference error
LE1DOWNmachen();
If you want the function to be called LE1DOWNmachen, then define it like this:
function LE1DOWNmachen() {
console.log("Here!");
}
or this
var LE1DOWNmachen = function() {
console.log("Here!");
}
If you want both names to work, you can do this:
function LE1DOWNmachen() {
console.log("Here!");
}
var LE1DOWN = LE1DOWNmachen;
I have scriptet me a maps with markers based on a MySQL Table.
The position is in the Table.
Now, i would like to write with HTML in the InfoWindow, because it not show HTML on the InfoWindow on the Map.
downloadUrl('inc/map_bridge.php', function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName('marker');
Array.prototype.forEach.call(markers, function(markerElem) {
var name = markerElem.getAttribute('name');
var ide = markerElem.getAttribute('id');
var desc = markerElem.getAttribute('beschreibung');
var type = markerElem.getAttribute('art');
var link = '<p>Klicke für weitere infos: Hier';
var point = new google.maps.LatLng(
parseFloat(markerElem.getAttribute('lat')),
parseFloat(markerElem.getAttribute('lng')));
var infowincontent = document.createElement('div');
var strong = document.createElement('strong');
strong.textContent = 'ID' + ide + ': ' + name
infowincontent.appendChild(strong);
infowincontent.appendChild(document.createElement('br'));
var text = document.createElement('text');
text.textContent = desc + link
infowincontent.appendChild(text);
var icon = customLabel[type] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
label: icon.label
});
marker.addListener('click', function() {
infoWindow.setContent(infowincontent);
infoWindow.open(map, marker);
});
});
});
}
It show only so:
show example picture
the following i have in the MySQL-Table
first line<br>second line
If 'beschreibung' were the result of SELECT SQL, the reason is escaped SELECT
SQL result.
(I'm in short of reputation, so write in answer form.)
How to determine the XPATH of an element at html page, opened in CrossWalkView(WebView) by onTouch event?
Problem was solved by using JS.
JS solution i got here:
I'm storing click coordinates in my db and then reloading them later and showing them on the site where the click happened, how do I make sure it loads in the same place?
InputStream is = getResources().openRawResource(R.raw.get_xpath);
Scanner s = new Scanner(is).useDelimiter("\\A");
String javascript = s.hasNext() ? s.next() : "";
myWebView.evaluateJavascript(javascript, null);
and here`s my JS code:
document.onclick= function(event) {
if (event===undefined) event= window.event; // IE hack
var target= 'target' in event? event.target : event.srcElement; // another IE hack
var root= document.compatMode==='CSS1Compat'? document.documentElement : document.body;
var mxy= [event.clientX+root.scrollLeft, event.clientY+root.scrollTop];
var path= getPathTo(target);
var txy= getPageXY(target);
alert('Clicked element '+path+' offset '+(mxy[0]-txy[0])+', '+(mxy[1]-txy[1]));
}
function getPathTo(element) {
if (element.id!=='')
return 'id("'+element.id+'")';
if (element===document.body)
return element.tagName;
var ix= 0;
var siblings= element.parentNode.childNodes;
for (var i= 0; i<siblings.length; i++) {
var sibling= siblings[i];
if (sibling===element)
return getPathTo(element.parentNode)+'/'+element.tagName+'['+(ix+1)+']';
if (sibling.nodeType===1 && sibling.tagName===element.tagName)
ix++;
}
}
function getPageXY(element) {
var x= 0, y= 0;
while (element) {
x+= element.offsetLeft;
y+= element.offsetTop;
element= element.offsetParent;
}
return [x, y];
}
I am building a website which use geolocation code, It suppose to load mapCanvas and after user click on "Finde Me!" button get his location and set a center of a map based on user location. It's working fine with Firefox, Chrome, Safari, tested on regular PC and iPhone the only device doesn't work with it is any mobile phone with Android. here is a code:
<script src="http://maps.google.com/maps?file=api&v=3&key=YourKey"
type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
var iconBlue = new GIcon();
iconBlue.image = 'http://labs.google.com/ridefinder/images/mm_20_blue.png';
iconBlue.shadow = 'http://labs.google.com/ridefinder/images/mm_20_shadow.png';
iconBlue.iconSize = new GSize(17, 25);
iconBlue.shadowSize = new GSize(1, 1);
iconBlue.iconAnchor = new GPoint(6, 20);
iconBlue.infoWindowAnchor = new GPoint(5, 1);
var iconRed = new GIcon();
iconRed.image = 'http://labs.google.com/ridefinder/images/mm_20_red.png';
iconRed.shadow = 'http://labs.google.com/ridefinder/images/mm_20_shadow.png';
iconRed.iconSize = new GSize(17, 25);
iconRed.shadowSize = new GSize(1, 1);
iconRed.iconAnchor = new GPoint(6, 20);
iconRed.infoWindowAnchor = new GPoint(5, 1);
var customIcons = [];
customIcons["restaurant"] = iconBlue;
customIcons["bar"] = iconRed;
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(50.061795,19.936924), 16);
// Change this depending on the name of your PHP file
GDownloadUrl("Your_xml.php", function(data) {
var xml = GXml.parse(data);
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var name = markers[i].getAttribute("name");
var address = markers[i].getAttribute("address");
var type = markers[i].getAttribute("type");
var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var marker = createMarker(point, name, address, type);
map.addOverlay(marker);
}
});
}
}
function createMarker(point, name, address, type) {
var marker = new GMarker(point, customIcons[type]);
var html = "<b>" + name + "</b> <br/>" + address;
GEvent.addListener(marker, 'click', function() {
marker.openInfoWindowHtml(html);
});
return marker;
}
//]]>
function findLoc(){
if (!navigator.geolocation) {
alert('Sorry, your browser does not support Geo Services');
}
else {
// Get the current location
navigator.geolocation.getCurrentPosition(showMap);
}
}
function showMap(position){
var lat = position.coords.latitude;
var lon = position.coords.longitude;
var myPoint = new GLatLng(lat, lon);
var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(myPoint, 15);
GDownloadUrl("Your_xml.php", function(data) {
var xml = GXml.parse(data);
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var name = markers[i].getAttribute("name");
var address = markers[i].getAttribute("address");
var type = markers[i].getAttribute("type");
var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var marker = createMarker(point, name, address, type);
map.addOverlay(marker);
}
});
function createMarker(point, name, address, type) {
var marker = new GMarker(point, customIcons[type]);
var html = "<b>" + name + "</b> <br/>" + address;
GEvent.addListener(marker, 'click', function() {
marker.openInfoWindowHtml(html);
});
return marker;
}
}
I couldn't find any solution to make it work.
PS
There is no errors or statements giving any hint making it more understandable.
Device got GPS enable.
pleas help I've been trying to figure it out for 2 weeks
I'm afraid you just have an arduous old-fashioned debug in front of you. My approach would be to add visible output at various important points in the code (just before and after getCurrentPosition is called, and at the beginning of showMap, for instance) and narrow down from there just where the failure is occurring. Once you know what's failing you can probably develop an idea of why, but until you know that you're flailing in the dark.
(I've worked on a geolocation-based mobile webapp that supported Android, so in case you need any reassurance, there's nothing inherently impossible about your situation.)