【分享】- 如何建置一個可使用中華電信 mCool49 電信方案, 並在 Android 手機上正常顯示 Google Maps 定位的服務？

前些日子漁郎想用中華電信的 mCool49 電信資費方案，看看 Android 手機中的 Google Maps 程式可否正常的使用，結果咧？不行... >_< ！原因是中華電信的 mCool49 方案會阻檔部份 port 的網路封包 (目前知 port 80,25,110 可正常傳輸)。

所以咧，山不轉，路轉！以下是漁郎土法練鋼的解法, 也當是漁郎自己的筆記：

[實作步驟]

Step 1 : 申建一個 Google App Engine 的 Application ID

請參考上一篇拙作 : 如何使用 Google 提供的 App Engine 建立 Web Service 。

Step 2 : 申請 Google Maps API ，以得到 Google Maps API 金鑰與 JavaScript 範例 :

到 http://code.google.com/intl/zh-TW/apis/maps/signup.html 申請您網站或網頁專屬的 Google Maps API 金鑰 :

Step 3. 建置一個 Google Maps 的互動網頁 (使用 jsp)，並發佈到 Google App Engine 中.

範例程式如下 :

index.jsp : (紅色部份請改為您抓取的 Google Maps AIP Script )

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">







<%@ page contentType='text/html;charset=UTF-8'%>
<%
  response.setHeader("Pragma","No-cache");
  response.setHeader("Cache-Control","No-cache");
  response.setDateHeader("Expires",1);
  try {
   request.setCharacterEncoding("UTF-8");
  } catch (java.io.UnsupportedEncodingException e) {
   out.println("Unsupport Encoding: "+e.toString());
  }
%>
<%
String mapsWidth = "320"; // 地圖顯示寬度
String mapsHeight = "480"; // 地圖顯示長度
String lat = "0"; // 經度
String lng = "0"; // 經度
if(request.getParameter("mapsWidth") != null) {
mapsWidth = request.getParameter("mapsWidth").trim();
} else {
mapsWidth = "320";
}
if(request.getParameter("mapsHeight") != null) {
mapsHeight = request.getParameter("mapsHeight").trim();
} else {
mapsHeight = "480";
}
if(request.getParameter("lat") != null) {
lat = request.getParameter("lat").trim();
} else {
lat = "25.023537";
}
if(request.getParameter("lng") != null) {
lng = request.getParameter("lng").trim();
} else {
lng = "121.295871";
}
%>
<html>
  <head>
   <meta http-equiv="content-type" content="text/html; charset=UTF-8">
   <style type="text/css">
   body {
   margin: 0;
   padding: 0;
   }
</style>
   <title>E68ClubMaps for e68Club</title>
  </head>
  <body>
   <div id="googlemap" style="height: <%=mapsHeight%>px; width: <%=mapsWidth%>px;"></div>
   <script src="http://maps.google.com/maps?file=api&v=2&sensor=false&key=ABQIAA123456789213456789wertyui34567rftghcvbhj45678fghjk5t6y7fgh45456fghjk5uA" type="text/javascript"></script>
<script type="text/javascript">
// <![CDATA[
var map = new GMap(document.getElementById("googlemap"));
//設定要顯示的控制項
map.addControl(new GLargeMapControl ());
map.addControl(new GMapTypeControl());
// 初始參數 : 決定你 Google 地圖的中心點位置和縮放大小
map.setCenter(new GLatLng(<%=lat%>,<%=lng%>),16);
// 初始參數 : 標記在 Google 地圖上的經緯度
var point_default = new GLatLng(<%=lat%>,<%=lng%>);
var marker_default = new GMarker(point_default);
map.addOverlay(marker_default);
// ]]>
</script>
  </body>
</html>

Step 4. 使用 WebView 崁入建立在 Google App Engine 上的 Maps API 網頁.

AndroidManifest.xml 中要加入 :

<uses-permission android:name="android.permission.INTERNET" /> 

layout/main.xml 中要加入 :

<WebView
  android:id="@+id/Web01"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:layout_margin="0px"
/>

Android 程式碼 :

String mWebUrl01 = "http://yourmapspage.appspot.com/index.jsp";

mWeb01 = (WebView)findViewById(R.id.Web01);

mWeb01.getSettings().setJavaScriptEnabled(true);
try {
  mWeb01.loadUrl(mWebUrl01+"?lat=25.023537&lng=121.295511");
} catch(Exception e) {
  // 當作沒錯誤, 避免破壞程式運作時畫面
}

e68Club 漁郎工坊 - 數位生活札記

2010年5月15日星期六