如何利用PhoneGap製做地圖APP

時間 2019-11-24

標籤如何利用 phonegap 製做地圖 app 简体版

原文原文鏈接

摘要：百度地圖API是一套由javascript編寫的地圖程序接口，按說它應該運行在瀏覽器上。如今，只要利用PhoneGap，咱們就能開發出移動平臺上能使用的APP了！javascript

---------------------------------------------html

1、安裝平臺java

PhoneGap支持5種平臺，IOS，安卓，黑莓，WebOS，塞班。git

咱們下面以IOS爲例，開發一個定位的APP。github

一、下載xCodeapi

注意看清楚，獅子系統和雪豹系統的安裝程序是不同的。xcode

a.能夠到蘋果應用商店app store上下載，不過速度很是的慢，一通宵都下載不到20%……優勢是免費。瀏覽器

b.也能夠到macx上下載，速度快，非會員收費。網絡

c.其實也能夠找有安裝程序的人拷貝，速度快，也免費……app

二、下載PhoneGap

到官網上下載，免費的，https://github.com/phonegap/phonegap/zipball/1.0.0

2、項目配置

一、啓動xCode，在菜單那裏選擇「create a new xcode project」

二、從模板列表裏選擇「phonegap-based application」，而後next

三、輸入公司名稱、項目名稱

四、選擇儲存目錄。

我通常就放到桌面上，哈哈。

五、右鍵單擊（觸控板2個手指按）項目左側的導航窗口，點擊「show in Finder」。

六、找到www文件夾。

七、把www文件夾拖動到藍色項目條上

八、把你的地圖htm文件拷貝到index.html裏面。點擊運行，就OK啦~

另外，最好部署到真機上，虛擬機上不少功能不是很好用。

所有源代碼：

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>冀興駕校--手機版</title>

<link rel="icon" type="image/x-icon" href="http://www.jixingjx.com/favicon.ico" />

<meta name="keyword" content="冀興駕校,冀興駕校手機版,jixingjiaxiao"/>

<meta name="description" content="冀興駕校手機版，讓你更快更準確地找到冀興駕校！"/>

<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2"></script>

<style>

body,html,#jx_map{height:100%;width:100%;padding:0;margin:0;font-size:14px;}

</style>

</head>

<body>

<div id="jx_map"></div>

</body>

<script type="text/javascript">

var map = new BMap.Map("jx_map");

map.centerAndZoom("北京", 14);

map.addControl(new BMap.MapTypeControl({mapTypes:[BMAP_NORMAL_MAP, BMAP_HYBRID_MAP], anchor:BMAP_ANCHOR_TOP_LEFT}));

map.addControl(new BMap.NavigationControl({type:BMAP_NAVIGATION_CONTROL_ZOOM, anchor:BMAP_ANCHOR_BOTTOM_RIGHT}));


// 定義一個控件類

function MyLocation(){

  this.defaultAnchor = BMAP_ANCHOR_TOP_RIGHT;

  this.defaultOffset = new BMap.Size(10, 10);

}

MyLocation.prototype = new BMap.Control();

MyLocation.prototype.initialize = function(map){

  var div = document.createElement("div");

  div.appendChild(document.createTextNode("定位"));

  // 設置樣式

  div.style.cursor = "pointer";

  div.style.border = "1px solid gray";

  div.style.backgroundColor = "white";

  div.style.padding = "10px";

  div.style.borderRadius = "5px";

  div.onclick = function(e){

    var geolocation = new BMap.Geolocation();

    geolocation.getCurrentPosition(function(r){

        if(this.getStatus() == BMAP_STATUS_SUCCESS){

            var mk = new BMap.Marker(r.point);

            map.addOverlay(mk);

            map.panTo(r.point);

            gc.getLocation(r.point, function(rs){

                var sContent = "您的位置是:</br>" + rs.address;    

                var infoWindow = new BMap.InfoWindow(sContent, {width:150, offset:new BMap.Size(0,-20)});

                map.openInfoWindow(infoWindow, r.point);  

            });

        }

        else {

            alert("網絡不通，請稍後再試。");

        }

    })

  }

  map.getContainer().appendChild(div);

  return div;

}

var mylocation = new MyLocation();  //定位

map.addControl(mylocation);



var gc = new BMap.Geocoder();  //地址解析

</script>

<script type="text/javascript">

var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://");

document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3Fc20b7442b4e0e7b9e42e799fae5f60bd' type='text/javascript'%3E%3C/script%3E"));

</script>

</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。