使用HTML5和Google地圖創建多平臺web應用程序

我正在爲如何開發適用於Android和iOS的webapp而苦苦掙扎。我的第一個應用程序是一個簡單的待辦事項應用程序，它很容易在我的瀏覽器中測試，它只使用html，javascript和css。但是，我必須創建一個使用Google Maps Api獲取位置的應用程序。我創建了一個簡單的html5頁面來測試哪些地圖上放置了一個標記。它在我的本地服務器上測試時工作正常。但是，當我爲Android創建.apk文件時，該應用程序無法正常工作。使用HTML5和Google地圖創建多平臺web應用程序

所以我想知道，是不是可以像這樣使用它？我有使用phonegap庫來使用他們的地理定位庫嗎？

如果是這樣，你如何處理多電腦操作系統電話中的web應用程序的開發？您是否必須安裝Android環境和iOS環境，以包含正確的phonegap庫並正確測試它們？

更新：我在我的web服務器上使用下面的代碼，它完美的工作。當我將其上傳到photogap雲的zip文件夾並將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>

來源

2014-06-06 Bart L.

在您的Android手機的GPS ... – Ved

這是我實現的谷歌地圖在我的項目的參考網站http://flippinawesome.org/2013/12/09/mobile-friendly-mapping-for-phonegap-apps/

它的偉大工程的所有四個platform.The應用是成功released.Here是在android平臺https://play.google.com/store/apps/developer?id=Gargash+Insurance鏈接到應用程序查看位置鏈接聯繫我們頁面的應用程序。無插件需要

來源

2014-06-06 09:14:29 ShinyJos

Thx但問題是我想檢索座標，它在我的網絡服務器上工作，但不是當我創建一個apk文件與phonegap。我在我的問題中添加了我的代碼。 –

使用HTML5和Google地圖創建多平臺web應用程序

回答

相關問題