你如何在 phonegap android 应用程序上显示地图(谷歌) [英] how do you display map (Google) on a phonegap android application

问题描述

我有一个在 Eclipse 中使用 phonegap 开发的 android 应用程序.我想向我的应用程序添加地图.我该怎么做?

Hi I have a android application developed using phonegap in Eclipse. I want to add a map to my application. How do I do that?

我需要为此添加插件吗?如果是，那么我会从哪一个那里得到那个?

Do I need to add a plugin for that? If yes then which one and where will I get that?

我希望能够根据地图 url 加载特定位置的地图.地图 URL 将保存在 DB 中.我已设法获取 URL，但不知道如何添加地图.

I want to be able to load map for a particular location based on the map url. The map URL wil be saved in the DB. I have managed to get the URL but cannot figure out how to add a map.

有什么帮助吗??

推荐答案

Map (Google) on a phonegap android application

获取当前纬度和经度

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)    
}

演示

您可以使用插件或不使用插件两种方式在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));
}

演示

这篇关于你如何在 phonegap android 应用程序上显示地图(谷歌)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！