Question

我正在制作用于地理定位的phonegap android应用程序。但它没有显示谷歌地图。我的代码如下。我为cordova安装了geolocation插件。并且它在下面的代码中运行正常的地理编码警报。我正在使用android mobile进行测试。

<!DOCTYPE html>
<html>
<head>
<title>Device Properties Example</title>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript src="http://maps.googleapis.com/maps/api/geocode/xml?sensor=false"></script>
<script type="text/javascript" charset="utf-8">
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
    navigator.geolocation.getCurrentPosition(onSuccess, onError, { timeout: 30000, enableHighAccuracy: true });
}
function onSuccess(position) {
alert("success");
    var element = document.getElementById('geolocation');
    element.innerHTML = 'Latitude: '           + position.coords.latitude              + '<br />' +
            'Longitude: '          + position.coords.longitude             + '<br />' +
            'Altitude: '           + position.coords.altitude              + '<br />' +
            'Accuracy: '           + position.coords.accuracy              + '<br />' +
            'Altitude Accuracy: '  + position.coords.altitudeAccuracy      + '<br />' +
            'Heading: '            + position.coords.heading               + '<br />' +
            'Speed: '              + position.coords.speed                 + '<br />' +
            'Timestamp: '          + position.timestamp                    + '<br />';
             var latitude = position.coords.latitude;
             var longitude = position.coords.longitude;
             ReverseGeocode(latitude,longitude);  
}

function onError(error) {
    alert('code: '    + error.code    + '\n' +
            'message: ' + error.message + '\n');
}
function ReverseGeocode(latitude, longitude){
alert("geocode");
var reverseGeocoder = new google.maps.Geocoder();
alert("location");
var currentPosition = new google.maps.LatLng(latitude, longitude);
alert("position");
}
</script>
</head>
<body>
<p id="geolocation">Finding geolocation...</p>
</body>
</html>

请帮忙。感谢。

Answer 1

如何使用Google Map api V3在您的Phonegap应用中显示Google地图？

首先在index.html中添加对Google maps api的引用：

＆＃13;

<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />

＆＃13;

然后添加一个包含地图的div。选择像“map_canvas”这样的ID。该ID将用于稍后从我们的javascript添加我们的地图。

<div id="map_canvas">
</div>

的 2。在www文件夹中创建一个名为googlemap.js的新javascript文件，并添加以下内容：

＆＃13;

function GoogleMap(){
     
    this.initialize = function(){
    var map = showMap();
    }
     
     var showMap = function(){
    var mapOptions = {
    zoom: 4,
    center: new google.maps.LatLng(-33, 151),
    mapTypeId: google.maps.MapTypeId.ROADMAP
    }
     
    var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
     
    return map;
    }
    }

＆＃13;

并在index.html中添加对它的引用

<script type="text/javascript" src="googlemap.js"></script>

mapOptions变量包含有关zoomlevel的信息，其中地图的中心是我们想要显示的地图类型。包含map变量的行使用getElementById来获取map_canvas并添加地图。

第3。显示地图
要显示地图，我们必须在googlemap.js中运行初始化函数。由于我们使用来自phonegap的示例index.html，我们将这些行添加到index.html中的onDeviceReady函数中

function onDeviceReady(){
var map = new GoogleMap();
map.initialize();
}

现在运行应用程序，您应该在澳大利亚上方查看地图的 4。添加标记

要向地图添加标记，我们使用Google API中的LatLng和Marker对象。在googlemap.js中编辑初始化函数，如下所示：

＆＃13;

function GoogleMap(){
 
this.initialize = function(){
var map = showMap();
addMarkersToMap(map);
 }

＆＃13;

并添加以下函数，名为addMarkersToMap：

＆＃13;

var addMarkersToMap = function(map){
var latitudeAndLongitudeOne = new google.maps.LatLng('-33.890542','151.274856');
 
var markerOne = new google.maps.Marker({
position: latitudeAndLongitudeOne,
map: map
});
 
var latitudeAndLongitudeTwo = new google.maps.LatLng('57.77828', '14.17200');
 
var markerOne = new google.maps.Marker({
position: latitudeAndLongitudeTwo,
map: map
});
 }
}

＆＃13;

的 5。缩小地图以显示所有标记
要在不知道要使用哪个缩放级别的情况下缩小地图，我们将使用Google Map API中的LatLngBounds对象。

首先在addMarkersToMap函数中添加以下行：

var mapBounds = new google.maps.LatLngBounds();

在函数的结束标记之前添加以下行：

mapBounds.extend(latitudeAndLongitudeOne);
mapBounds.extend(latitudeAndLongitudeTwo);



map.fitBounds(mapBounds);

addMarkersToMap函数现在看起来像这样：

＆＃13;

var addMarkersToMap = function(map){
var mapBounds = new google.maps.LatLngBounds();
 
var latitudeAndLongitudeOne = new google.maps.LatLng('-33.890542','151.274856');
 
var markerOne = new google.maps.Marker({
position: latitudeAndLongitudeOne,
map: map
});
 
var latitudeAndLongitudeTwo = new google.maps.LatLng('57.77828', '14.17200');
 
var markerOne = new google.maps.Marker({
position: latitudeAndLongitudeTwo,
map: map
});
 
mapBounds.extend(latitudeAndLongitudeOne);
mapBounds.extend(latitudeAndLongitudeTwo);
 
map.fitBounds(mapBounds);
 }

＆＃13;

现在我们已经完成，运行应用程序，地图现在缩小，以便您可以看到我们在瑞典添加的标记。

用于谷歌地图地理位置问题的phonegap android应用程序

1 个答案: