你怎么显示的地图（谷歌）在PhoneGap的Andr​​oid应用程序 [英] how do you display map (Google) on a phonegap android application

问题描述

您好我开发了一个Android应用程序在Eclipse中使用PhoneGap的。我要地图添加到我的应用程序。我该怎么办呢？

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，但无法弄清楚如何添加一个地图。

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.

任何帮助??

推荐答案

获取当前的经纬度

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）使用插件

<一个href="https://github.com/wf9a5m75/phonegap-googlemaps-plugin">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

这篇关于你怎么显示的地图（谷歌）在PhoneGap的Andr​​oid应用程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！