phonegap与openlayers混搭在android上显示地图

最新推荐文章于 2024-11-08 11:54:25 发布

qb371

最新推荐文章于 2024-11-08 11:54:25 发布

阅读量501

点赞数

分类专栏： GIS开发开源GIS 移动开发文章标签： phonegap android cordova javascript adobe windows phone

GIS开发同时被 3 个专栏收录

24 篇文章

订阅专栏

开源GIS

4 篇文章

订阅专栏

移动开发

1 篇文章

订阅专栏

本文介绍如何使用PhoneGap框架结合OpenLayers地图库创建跨平台移动应用。通过实例演示了在PhoneGap项目中集成OpenLayers的过程，展示了如何加载并显示地图。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

关于PhoneGap的介绍：PhoneGap是一个开源的开发框架，使用HTML，CSS和JavaScript来构建跨平台的的移动应用程序。它使开发者能够利用iPhone，Android，Palm，Symbian，Blackberry，Windows Phone和Beda智能手机的核心功能——包括地理定位，加速器，联系人，声音和振动等。官方地址：http://phonegap.com/

关于Openlayers的介绍：Openlayers是一个用来在浏览器中显示地图的JavaScript类库，支持各种地图类型.官方地址：http://openlayers.org/

目前Phonegap已经被Adobe收购，并且源代码也加入Apache开源项目了，名称是Cordova，目前据官方说法，PhoneGap与Cordova只是名称不同，源码都是一样的。地址：http://incubator.apache.org/cordova/

使用Eclipse开发PhoneGap的Android应用步骤可参考：http://www.phonegap.cn/?page_id=442#android

下载Openlayers的库文件http://openlayers.org/download/OpenLayers-2.11.zip
加入Openlayers的方法与普通的web应用没什么区别，只需在index.html中加入Openlayers的js库，并在js文件的目录下拷入img和theme文件夹

效果：

模拟器截屏

参考代码；index.html

[html]view plaincopy 
   
 <html>  
 <head>  
 <title>PhoneLayers</title>  
 <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"></meta>  
 <style>  
     body {  
        background:#ff0;  
        }  
     div#main {  
        background:#ccf;  
        height:100%;  
        width:80%;  
        padding:10%;  
        -webkit-border-radius:8px;  
        }  
     </style>  
 </head>  
 <script src="js/cordova-1.5.0.js"></script>  
 <script src="js/OpenLayers.js"></script>  
 <script>  
   var map;  
 document.addEventListener("deviceready",function(){  
     document.getElementById("SysInfo").  
     addEventListener("click",alertCompliment,false);  
     init();  
     },false);  
       
     function init(){  
        map = new OpenLayers.Map('map_element',{});  
        var wms = new OpenLayers.Layer.WMS(  
            "OpenLayers WMS",  
            "http://vmap0.tiles.osgeo.org/wms/vmap0",  
            {layers:'basic'},  
            {}  
        );   
          
        map.addLayer(wms);  
        if(!map.getCenter()){  
            map.zoomToMaxExtent();  
        }  
     }  
       
 function alertCompliment() {  
     var elementId = this.id;  
     var greeting;  
         greeting = "\nmodel:"+device.name + "\nsystem:" +device.platform  
           +"\nversion:" + device.version  
           +"\nid:" + device.uuid  
           +"\ncordova:" + device.cordova;  
   
     navigator.notification.alert("Sys Info:"+ greeting,function(){},"You Are The Best");  
 }  
 </script>  
 <body>  
 <div id="main">  
 It works!You're really great!<br>  
 <button id="SysInfo">Show Sys Info</button>  
 <br>  
 <div id="map_element">  
 </div>  
 </div>  
 </body>  
 </html>  

项目文件结构：

eclipse工程文档目录

推荐书籍：
PacktPub.PhoneGap+Beginner’s+Guide.Sep.2011.pdf
OpenLayers.2.10.Beginners.Guide_2.pdf
在Adobe的官方网站有Phonegap的教程视频:http://tv.adobe.com/show/adc-presents-phonegap/