Question

我能够在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');
}

Answer 1

使用jQuery Mobile +一个名为 GMAP API v3 的小型Google框架时非常容易。

工作示例：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
   });
});

Answer 2

您可以使用Google Maps JavaScript API。只需使用JavaScript和HTML，您就可以在应用程序中包含地图。完成此任务的所有信息均为here。如果要显示坐标的实际位置，可以插入maker

如何使用jquery mobile + phonegap（android）在地图中显示经度和纬度

2 个答案: