Android 使用HTML5和谷歌地图创建多平台webapp_Android_Ios_Html_Cordova

Android 使用HTML5和谷歌地图创建多平台webapp

android ios html cordova

Android 使用HTML5和谷歌地图创建多平台webapp,android,ios,html,cordova,Android,Ios,Html,Cordova,我正在努力为Android和iOS开发网络应用程序。我的第一个应用程序是一个简单的todo应用程序，很容易在我的浏览器中测试，它只使用html、javascript和css。然而，我必须创建一个应用程序，它使用谷歌地图Api来获取位置。我创建了一个简单的html5页面来测试在地图上放置标记的位置。在本地服务器上测试时，它工作正常。但是，当我为Android创建一个.apk文件时，该应用程序无法运行 <!DOCTYPE html> <html> <head&g

我正在努力为Android和iOS开发网络应用程序。我的第一个应用程序是一个简单的todo应用程序，很容易在我的浏览器中测试，它只使用html、javascript和css。然而，我必须创建一个应用程序，它使用谷歌地图Api来获取位置。我创建了一个简单的html5页面来测试在地图上放置标记的位置。在本地服务器上测试时，它工作正常。但是，当我为Android创建一个.apk文件时，该应用程序无法运行

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Simple Geo test</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
</head>
<body>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script>
function success(position) {
  var mapcanvas = document.createElement('div');
  mapcanvas.id = 'mapcontainer';
  mapcanvas.style.height = '200px';
  mapcanvas.style.width = '200px';
  document.querySelector('article').appendChild(mapcanvas);
  var coords = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);

  var options = {
    zoom: 15,
    center: coords,
    mapTypeControl: false,
    navigationControlOptions: {
        style: google.maps.NavigationControlStyle.SMALL
    },
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var map = new google.maps.Map(document.getElementById("mapcontainer"), options);

  var marker = new google.maps.Marker({
      position: coords,
      map: map,
      title:"You are here!"
  });
}

if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(success);
} else {
  error('Geo Location is not supported');
}
</script>
<article></article>
</body>
</html>

所以我想知道，难道不能这样使用它吗？我是否可以使用phonegap库来使用其地理位置库

如果是这样，您如何在phonegap中为多个操作系统开发webapp？您是否必须安装一个Android环境和一个iOS环境，以便每个环境都包含正确的phonegap库并正确测试它们

更新：我在我的Web服务器上使用了以下代码，它工作得非常好。当我把它上传到一个zip文件夹到photogap云上并在手机上安装APK文件时，它就不起作用了

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Simple Geo test</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
</head>
<body>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script>
function success(position) {
  var mapcanvas = document.createElement('div');
  mapcanvas.id = 'mapcontainer';
  mapcanvas.style.height = '200px';
  mapcanvas.style.width = '200px';
  document.querySelector('article').appendChild(mapcanvas);
  var coords = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);

  var options = {
    zoom: 15,
    center: coords,
    mapTypeControl: false,
    navigationControlOptions: {
        style: google.maps.NavigationControlStyle.SMALL
    },
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var map = new google.maps.Map(document.getElementById("mapcontainer"), options);

  var marker = new google.maps.Marker({
      position: coords,
      map: map,
      title:"You are here!"
  });
}

if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(success);
} else {
  error('Geo Location is not supported');
}
</script>
<article></article>
</body>
</html>


简易土工试验
功能成功（职位）{
var mapcanvas=document.createElement（'div'）；
mapcanvas.id='mapcontainer'；
mapcanvas.style.height='200px'；
mapcanvas.style.width='200px'；
document.querySelector（'article'）.appendChild（mapcanvas）；
var coords=new google.maps.LatLng（position.coords.latitude，position.coords.longitude）；
变量选项={
缩放：15，
中心：coords，
mapTypeControl:false，
导航控制选项：{
样式：google.maps.NavigationControlStyle.SMALL
},
mapTypeId:google.maps.mapTypeId.ROADMAP
};
var map=new google.maps.map（document.getElementById（“mapcontainer”），选项）；
var marker=new google.maps.marker({
职位：coords，
地图：地图，
标题：“你在这里！”
});
}
if（导航器.地理位置）{
navigator.geolocation.getCurrentPosition（成功）；
}否则{
错误（“不支持地理位置”）；
}

这是我在项目中实现谷歌地图的参考站点

它适用于所有四个平台。该应用程序已成功发布。这是android平台中的应用程序链接，请参阅应用程序中“联系我们”页面中的位置链接。不需要插件

Thx，但问题是我想检索坐标，它在我的Web服务器上工作，但在我使用phonegap创建apk文件时不起作用。我在我的问题中添加了我的代码。在你的android手机的GPS上。。。