I am trying to show a map tracking a users location in my phonegap build. I am trying to use this example,
http://view.jquerymobile.com/master/demos/map-geolocation/
And i have added the html css and js to my app and added
<feature name="http://api.phonegap.com/1.0/geolocation"/>
<feature name="http://api.phonegap.com/1.0/network"/>
to my config.xml file.
all i get is a white screen with nothing loading.
What am i doing wrong!?!?
Thanks guys! You have all helped me out very much in the past and this is the last thing i need to finish this app!
Thanks again in advance!
my html code i use is
<div role="main" class="ui-content" id="map-canvas"></div>
my css code i use is
#map-page, #map-canvas { width: 100%; height: 100%; padding: 0; }
my js code i use is
<script>
$( document ).on( "pageinit", "#map-page", function() {
var defaultLatLng = new google.maps.LatLng(34.0983425, -118.3267434); // Default to Hollywood, CA when no geolocation support
if ( navigator.geolocation ) {
function success(pos) {
// Location found, show map with these coordinates
drawMap(new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude));
}
function fail(error) {
drawMap(defaultLatLng); // Failed to find location, show default map
}
// Find the users current position. Cache the location for 5 minutes, timeout after 6 seconds
navigator.geolocation.getCurrentPosition(success, fail, {maximumAge: 500000, enableHighAccuracy:true, timeout: 6000});
} else {
drawMap(defaultLatLng); // No geolocation support, show default map
}
function drawMap(latlng) {
var myOptions = {
zoom: 10,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);
// Add an overlay to the map of current lat/lng
var marker = new google.maps.Marker({
position: latlng,
map: map,
title: "Greetings!"
});
}
});
</script>
and i am putting my js right before my html , right after
<div data-role="content" class="content">
but i have tried placing it in the head as well.
Try setting the lat and lng var to 0 prior to the geo call.
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
navigator.geolocation.getCurrentPosition(onSuccess, onError, { maximumAge:60000, timeout:5000, enableHighAccuracy:true });
}
var lat = 0;
var lng = 0;
function onSuccess(position) {
lat += position.coords.latitude
lng += position.coords.longitude
}
Probably you don't have the geolocation plugin in your phonegap project.
http://docs.phonegap.com/en/3.3.0/cordova_geolocation_geolocation.md.html#Geolocation
cordova plugin add org.apache.cordova.geolocation
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.