你如何在 phonegap android 应用程序上显示地图（谷歌）

Question

您好，我有一个在 Eclipse 中使用 phonegap 开发的 android 应用程序。我想在我的应用程序中添加地图。我该怎么做？

我需要为此添加插件吗？如果是，那么我将在哪里获得？

我希望能够根据地图网址加载特定位置的地图。地图 URL 将保存在数据库中。我设法获取了 URL，但不知道如何添加地图。

有什么帮助吗？？

Answer 1

phonegap android 应用程序上的地图 (Google)

获取当前的经纬度

navigator.geolocation.getCurrentPosition(onSuccess, onError);

function onSuccess(position) {
   var current_lat = position.coords.latitude;
   var current_lng = position.coords.longitude;

}

function onError(error)
{
   alert(error)    
}

Demo

您可以使用插件或不使用插件在 phonegap 应用中显示地图

1) 使用插件

Phonegap-googlemaps-plugin

2) 没有插件

HTML

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=true"></script>

<div id="map_canvas" style="width:100%;height:100%; position:absolute;"></div> 

JAVASCRIPT

 var secheltLoc = new google.maps.LatLng(your_latitude, your_longitude);

 var myMapOptions = {
   zoom: 16
   ,center: secheltLoc
   ,mapTypeId: google.maps.MapTypeId.HYBRID
 };
 var theMap = new google.maps.Map(document.getElementById("map_canvas"), myMapOptions);
 var image = "img/map_pin.png"
 var marker = new google.maps.Marker({
 map: theMap,
 draggable: false,
 position: new google.maps.LatLng(latitude, longitude),
 visible: true,
 icon: image,
 title:restaurantName // Title
});

 var myOptions = {
  content: ""
 ,disableAutoPan: false
 ,maxWidth: 0
 ,pixelOffset: new google.maps.Size(-140, -110)
 ,pixelOffset: new google.maps.Size(140, 110)
 ,zIndex: null
 ,boxStyle: { 
  background: "url('tipbox.gif') no-repeat"
  ,opacity: 0.90
 }
 ,closeBoxMargin: "10px 2px 2px 2px"
 ,closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif"
 ,infoBoxClearance: new google.maps.Size(1, 1)
 ,isHidden: false
 ,pane: "floatPane"
 ,enableEventPropagation: false
 };

 var contentString = '<div class="map_anotaion_title">Yor Content</div>'; //Address on pin click

var infowindow = new google.maps.InfoWindow({
  content: contentString
 });
 infowindow.open(theMap,marker); 
 google.maps.event.addListener(marker, "click", function (e) {
    infowindow.open(theMap,marker);     
 });

地图中有多个标记

var locations = new Array(3);

locations [0] = new Array(3);
locations[0][0] = "Bondi Beach";
locations[0][3] = 23.0300;
locations[0][4] = 72.4000;
locations[0][5] = 3;

locations [1] = new Array(3);
locations[1][0] = 'Coogee Beach'
locations[1][6] =  21.3600;
locations[1][7] = 71.1500;
locations[1][8] = 4;

locations [2] = new Array(3);
locations[2][0] = 'Cronulla Beach';
locations[2][9] = 22.3200;
locations[2][10] = 73.0000;
locations[2][11] = 73.0000;



var map = new google.maps.Map(document.getElementById('map_canvas'), {
  zoom: 6,
  center: new google.maps.LatLng(locations[0][12], locations[0][13]),
  mapTypeId: google.maps.MapTypeId.HYBRID
});

var infowindow = new google.maps.InfoWindow();

var marker, i;

for (i = 0; i < locations.length; i++) {  
  marker = new google.maps.Marker({
    position: new google.maps.LatLng(locations[i][14], locations[i][15]),
    map: map
  });

  google.maps.event.addListener(marker, 'click', (function(marker, i) {
    return function() {
      infowindow.setContent(locations[i][0]);
      infowindow.open(map, marker);
    }
  })(marker, i));
}

Demo