Phone gap geolocation with google maps

问题

I wanna make an app which requires me to get my position and display it on google maps. I used the code from http://wiki.phonegap.com/w/page/16494764/PhoneGap%20Geolocation%20Sample%20Application. I am developing for Android 2.2 using phonegap 2.0.0. I am using the emulator 2.2.

I have installed everything from Phonegap correctly and i obtained a google Api3 key for the map. I place the key after: http://maps.google.com/maps/api/staticmap?center=(here i place the key). Now when i start the app i use CMD to send coördinates. Telnet Localhost 5554, geo fix et cetera. When i start the app it will give an error: Cant retrieve position Error[object PositionError].

I don't get the error anymore (i added enable HighAccuracy). But it doesnt show anything either. So i think i did something wrong with the google map or i forgot something.

Could anyone help me? It shows a question mark in the top left corner.

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

     <head>

<meta name="viewport" content="width=device-width; height=device-height; user-scalable=no" />

<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Beer Me</title>
<link rel="stylesheet" href="/master.css" type="text/css" media="screen" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8" src="cordova-2.0.0.js"></script>
<script type="text/javascript">

               function loader() {

                    var state = document.readyState;

                    if (state == 'loaded' || state == 'complete') {

                         run();

                    } else {

                         if (navigator.userAgent.indexOf('Browzr') > -1) {

                              setTimeout(run, 250);

                         } else {

                              document.addEventListener('deviceready',run,false);
                         }
                         }
                         }

               function run() {
                   var imageUrl = "http://maps.google.com/maps/api/staticmap?sensor=false&center=" + latitude + ',' + longitude +
                   "&zoom=14&size=300x400&markers=color:blue|label:S|" + latitude + ',' + longitude;
               console.log("imageUrl-" + imageUrl);
               $("#map").remove();
               $(document.body).append(
                   $(document.createElement("img")).attr("src", imageUrl).attr('id', 'map')
               );

                    var fail = function(e) {
                         alert('Can\'t retrieve position.\nError: ' + e);
                    };
                    navigator.geolocation.getCurrentPosition(imageUrl, fail,{ enableHighAccuracy: true });
               } 

          </script>
     </head>

回答1:

/* enter code here */ function GetCurrentLocation()
            {
                if (navigator.geolocation) { 
                    navigator.geolocation.getCurrentPosition(function(position) {  

                                                             var point = new google.maps.LatLng(position.coords.latitude, 
                                                                                                position.coords.longitude);

                                                             // Initialize the Google Maps API v3
                                                             var map = new google.maps.Map(document.getElementById('map'), {
                                                                                           zoom: 16,
                                                                                           center: point,
                                                                                           mapTypeId: google.maps.MapTypeId.ROADMAP
                                                                                           });

                                                             // Place a marker
                                                             new google.maps.Marker({
                                                                                    position: point,
                                                                                    map: map
                                                                                    });
                                                             }); 
                } 
                else {
                    alert('W3C Geolocation API is not available');
                }
            }

Use this code and set sensor = false on

Hope it will help. Remember that it is not static map.

回答2:

You will need to import the google java script files into your solution

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>

Then can use the code below so to show your location...just substitute your latitude and longitude

   var imageUrl = "http://maps.google.com/maps/api/staticmap?sensor=false&center=" + latitude + ',' + longitude +
        "&zoom=14&size=300x400&markers=color:blue|label:S|" + latitude + ',' + longitude;
    console.log("imageUrl-" + imageUrl);
    $("#map").remove();
    $(document.body).append(
        $(document.createElement("img")).attr("src", imageUrl).attr('id', 'map')
    );

来源：https://stackoverflow.com/questions/11688457/phone-gap-geolocation-with-google-maps

标签

android

google-maps

cordova

geolocation