1

我能够在 phonegap 中获得经度和纬度。现在我需要在地图视图上显示这个。是否有任何 jquery 或 phonegap 库可以在地图中显示？我需要 jquery 移动代码，以便它可以在 android 和 Ios 上运行。

var lng = 0;
//A button click will call this function
function getLocation() {
    navigator.geolocation.getCurrentPosition(onSuccess, onError, { enableHighAccuracy: true });
}

// onSuccess Geolocation
//
function onSuccess(position) {
    //Lat long will be fetched and stored in session variables
    //These variables will be used while storing data in local database 
    lat = position.coords.latitude;
    lng = position.coords.longitude;
   // alert('Lattitude: ' + lat + ' Longitude: ' + lng);
    sessionStorage.setItem('lattitude', lat);
    sessionStorage.setItem('longitude', lng);
}
// onError Callback receives a PositionError object
//
function onError(error) {
    alert('code: ' + error.code + '\n' +
          'message: ' + error.message + '\n');
}var lng = 0;
//A button click will call this function
function getLocation() {
    navigator.geolocation.getCurrentPosition(onSuccess, onError, { enableHighAccuracy: true });
}

// onSuccess Geolocation
//
function onSuccess(position) {
    //Lat long will be fetched and stored in session variables
    //These variables will be used while storing data in local database 
    lat = position.coords.latitude;
    lng = position.coords.longitude;
   // alert('Lattitude: ' + lat + ' Longitude: ' + lng);
    sessionStorage.setItem('lattitude', lat);
    sessionStorage.setItem('longitude', lng);
}
// onError Callback receives a PositionError object
//
function onError(error) {
    alert('code: ' + error.code + '\n' +
          'message: ' + error.message + '\n');
}
4

2 回答 2

1

使用 jQuery Mobile + 一个名为GMAP API v3.

工作示例：http: //jsfiddle.net/Gajotres/7kGdE/

CSS在这里很重要，因为 data-role="content" 默认情况下不会覆盖整个页面，因此我们需要强制它覆盖可用空间。

HTML： 

<!DOCTYPE html>
<html>
<head>
    <title>jQM Complex Demo</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1"/>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>    
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>    
</head>
<body>
    <div data-role="page" id="index">
        <div data-theme="a" data-role="header">
            <h3>
                First Page
            </h3>
        </div>

        <div data-role="content" id="content">
            <div id="map_canvas" style="height:100%"></div>
        </div>

        <div data-theme="a" data-role="footer" data-position="fixed">
            <h3>
                First Page
            </h3>
        </div>
    </div>
</body>
</html>

CSS：

#content {
    padding: 0;
    position : absolute !important; 
    top : 40px !important;  
    right : 0; 
    bottom : 40px !important;  
    left : 0 !important;     
}

Javascript：

$(document).on('pageinit', '#index',function(e,data){    
   // This is the minimum zoom level that we'll allow
   var minZoomLevel = 12;

   var map = new google.maps.Map(document.getElementById('map_canvas'), {
      zoom: minZoomLevel,
      center: new google.maps.LatLng(38.50, -90.50),
      mapTypeId: google.maps.MapTypeId.ROADMAP
   });
});
于 2013-07-05T07:30:51.180 回答
1

您可以使用 Google Maps JavaScript API。只需使用 JavaScript 和 HTML，您就可以在应用程序中包含地图。完成此操作的所有信息都在这里。如果你想显示坐标的实际位置，你可以插入一个制造商

于 2013-07-05T07:33:19.370 回答