2012年12月21日 星期五

Android程式設計 - 使用Google Map V3 (1) 基本架構

Google自2012.12.3起聲明不支援Map API V1,即不再增加新功能,到2013.3.3前仍接受申請Map API V1 key。Map API V2改用com.google.android.gms.maps.MapFragment,仍需申請Map API V2 key;Google Map API V3則改為Javascript API方式,使用WebView來顯示Google Map,應用程式不需再申請Google Map API key,但同一頁面免費存取次數為25000次/天。

1. 編輯一個HTML檔(例如: googleMap.html),並放置到asset目錄。在html檔中置入一個<div>標籤,大小為全螢幕,用來顯示Google Map。
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<script type="text/javascript" 
        src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript">
  function initialize() {
    var myLatlng = new google.maps.LatLng(23.937591,120.700807);  //地圖中心點
    var myOptions = {
           zoom: 17,
           center: myLatlng,
           mapTypeId: google.maps.MapTypeId.ROADMAP               //道路地圖
    }
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  }
</script>
</head>
<body style="margin:0px; padding:0px;" onload="initialize()">
  <div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>

2. 在版面配置中加入一個WebView元件
<RelativeLayout ...>
  <WebView android:id="@+id/webview"
      android:layout_width="fill_parent"
      android:layout_height="fill_parent"/>
</RelativeLayout>

3. 撰寫MainActivity程式,設定WebView啟用JavaScript功能,之後載入googleMap.html。
public class MainActivity extends Activity{
    private static final String MAP_URL = "file:///android_asset/googleMap.html";
    private WebView webView;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        setupWebView();
        this.setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_PORTRAIT);
    }   
    private void setupWebView(){
        webView = (WebView) findViewById(R.id.webview);
        webView.getSettings().setJavaScriptEnabled(true);       
        webView.loadUrl(MAP_URL);  
    }
}




11 則留言:

  1. 請問老師可以指點一下,
    如何可以把兩點間的路線規劃顯示在手機上嗎??
    我自己做了一個html, 在電腦上可以show兩點之間的路線,
    但當我放進我的android app裡就不能顯示這條路線,
    請問要有什麼技巧才可以把這路顯示出黎??謝謝!!

    回覆刪除
  2. 想請教一下,我目前程式是錯在這一行this.setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_PORTRAIT);
    主要錯誤是ActivityInfo這個部分

    請問能不能幫我解決這個問題所在嗎,謝謝。

    回覆刪除
    回覆
    1. 你有沒有import android.content.pm.ActivityInfo; ?

      刪除
  3. 請問 如果要抓自己的定位位置 該加入那些程式碼?

    不好意思打擾了

    回覆刪除
  4. 老師請問一下 秀出來地圖顯示是白色的 這問題是甚麼原因

    回覆刪除
  5. 老師您好 我照您的步驟去做,連到網頁卻說 file:///android_asset/googleMap.html 這個有錯誤,請問我有少做甚麼步驟或是檔案位置應該要加其他東西嗎?

    回覆刪除
    回覆
    1. 作者已經移除這則留言。

      刪除
    2. 專案中html檔的路徑是"assets/googleMap.html", 檢查看看是不是少打了's'

      然後記得AndroidManifest要加 android.permission.INTERNET

      刪除
  6. 老師您好 我依照您的步驟做完發現,手機顯示一片空白,請問友人也遇過這種情況嗎??

    回覆刪除
    回覆
    1. 我跟你一樣@@!! 我也找不到原因

      刪除
  7. 請問一下為什麼我使用V3 怎麼使用都 沒也畫面呢 也沒錯誤
    權限 跟地圖 我都設了 但就是白畫面
    以下是我的發問
    裡面有詳細的 細節 如有空可以提供我一些方向嗎
    http://apk.tw/thread-738926-1-1.html

    回覆刪除