[Xamarin] 使用Google Map

2014-02-07

在原生Android 做過一次,很麻煩,在Xamarin 下面也做過一次,也是很麻煩,畢竟,Android 雖然是免費,但是Google Map 這服務依然是Google 自己本家的,所以這也是為什麼刷機常常都要再補刷入Google Service ..
Screenshot_2014-02-07-17-27-27

接下來就是一堆動作盡量紀載詳細點..



1. 首先你得先安裝Google Play Service ,安裝Xamarin SDK 之後,他預設會把SDK Manager.exe 放在 :

C:\Users\[USERNAME]\AppData\Local\Android\android-sdk\SDK Manager.exe

執行之後:
2014-02-07_174149

重點是Google Play services 如果你不想太了解是啥,你就把Extras 全部都安裝吧..

2.去Google Developer Console 申請你的Key : https://cloud.google.com/console/project

首先先建立專案

2014-02-07_153244

2014-02-07_153853

在這裡其中的DonmaMapPrac 隨便命名你自己看得懂即可,下面的ProjectId 也是,等等在開發中此名詞也暫時都用不到。

選擇該專案後,選APIs 然後將Google Maps Android API v2 給打開,點一下OFF 即可

2014-02-07_154219

完成後,右邊STATUS 會是ON

2014-02-07_180045

接下來,選擇左手邊Credentials 選擇CREATE NEW KEY
2014-02-07_155010


選擇Android Key
2014-02-07_155015

之後就會出現
2014-02-07_180442

接下來因為測試專案,我們必須要產生一組簽證的Key,打開你的命令提示字元找到你JDK 安裝位置,我電腦位置是在
C:\Program Files (x86)\Java\jdk1.6.0_39\bin>
接下來我們得切換到 該目錄下面並且輸入指令

keytool -list -v -keystore "C:\Users\Stark\AppData\Local\Xamarin\Mono for Android\debug.keystore"  -alias androiddebugkey -storepass android -keypass android

請注意,其中我電腦使用者名稱是Stark 所以必須要換成你的帳戶名稱,還有如果沒意外的話預設Xamarin 安裝的debug.keystore 會在 C:\Users\[使用者名稱]\AppData\Local\Xamarin\Mono for Android\ 下

2014-02-07_180748

之後有看到上面有寫道一組SHA1: 22:14:A2:0D:B8:BC:64:52:89:3E:AE:5A:EA:B3:0C:A3:6E:AA:D2:CB 這組就是我們要的,當然你電腦產出來的跟我產出來的一定會有所不同
接下來,我們把這一段複製起來,回到Google Developer Console 把上述那一段SHA1 code 貼上並且加上分號(;)加上 你預計開發App 的Package Name 這地方Package Name 就很重要,必須要跟你預計開發的App 要一樣本文範例為 com.donma.pracmap

2014-02-07_181448

按下Create 之後,我們就可以拿到我們要得Key

2014-02-07_181558

3.好了既然拿到Key 我們就來寫程式吧..

首先,我們開啟專案後記得把專案SDK 都條4.0以上
2014-02-07_181719

之後我們設定一下專案的Package Name

2014-02-07_181804

請注意,要跟你在Google Developer Console 輸入的一樣喔。

4.加入GooglePlayServicesLib(感謝 蕭十一提供此簡單方法)

點選專案的Components 點選 Get More Components
2014-02-07_182050

之後找尋Google Play  Serive
2014-02-07_182110

並且安裝他
2014-02-07_182117

好了這時候檢查一下專案裡引入是否成功
2014-02-07_182358

5.開始寫程式,首先,我們打開 AndroidManifest.xml 加入這一段

<!-- Google Maps for Android v2 requires OpenGL ES v2 -->
<uses-feature android:glEsVersion="0x00020000" android:required="true" />
<!-- We need to be able to download map tiles and access Google Play Services-->
<uses-permission android:name="android.permission.INTERNET" />
<!-- Allow the application to access Google web-based services. -->
<uses-permission android:name="com.google.android.providers.gsf.permission.READ_GSERVICES" />
<!-- Google Maps for Android v2 will cache map tiles on external storage -->
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<!-- Google Maps for Android v2 needs this permission so that it may check the connection state as it must download data -->
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<!-- These are optional, but recommended. They will allow Maps to use the My Location provider. -->
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<!-- Notice here that we have the package name of our application as a prefix on the permissions. -->
<uses-permission android:name="com.donma.pracmap.permission.MAPS_RECEIVE" />
<permission android:name="com.donma.pracmap.permission.MAPS_RECEIVE" android:protectionLevel="signature" />
<application android:label="當麻測試地圖">
<!-- Put your Google Maps V2 API Key here. This key will not work for you.-->
<!-- See https://developers.google.com/maps/documentation/android/start#obtaining_an_api_key -->
<meta-data android:name="com.google.android.maps.v2.API_KEY" android:value="AIzaSyDVM5o0kchFyUokyIZyJL0vNBddVZ-NTMs" />
<meta-data android:name="com.google.android.gms.version" android:value="@integer/google_play_services_version" />
</application>
請注意,桃紅色的字體的地方是你要注意的要改成你專案的PackageName 不要copy paste 就用了,還有粉紅色的地方要輸入前面辛苦步驟得到的API KEY

6.終於我們可以來寫程式,首先我們來看Layout : Main.axaml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<fragment
android:id="@+id/map"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
class="com.google.android.gms.maps.MapFragment"
android:layout_weight="1" />
<Button
android:text="顯示"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="@+id/btnLocate" />
</LinearLayout>

2014-02-07_182840

按下顯示後,我會把地圖Focus 照台北101 的位置上,很簡單的範例

7. C# code 的部分 Activity1.cs
using Android.App;
using Android.Gms.Maps;
using Android.Gms.Maps.Model;
using Android.OS;
using Android.Widget;

namespace PracMap
{
[Activity(Label = "PracMap", MainLauncher = true, Icon = "@drawable/icon")]
public class Activity1 : Activity
{
private GoogleMap _map;
private MapFragment _mapFragment;

protected override void OnCreate(Bundle bundle)
{
base.OnCreate(bundle);

// Set our view from the "main" layout resource
SetContentView(Resource.Layout.Main);


var btnLocate = FindViewById<Button>(Resource.Id.btnLocate);

//將地圖初始化
_mapFragment = FragmentManager.FindFragmentByTag("map") as MapFragment;
if (_mapFragment == null)
{
GoogleMapOptions mapOptions = new GoogleMapOptions()
.InvokeMapType(GoogleMap.MapTypeSatellite)
.InvokeZoomControlsEnabled(true)
.InvokeCompassEnabled(true);

var fragTx = FragmentManager.BeginTransaction();
_mapFragment = MapFragment.NewInstance(mapOptions);
fragTx.Add(Resource.Id.map, _mapFragment, "map");
fragTx.Commit();
}


btnLocate.Click += delegate
{
if (_map == null)
{
_map = _mapFragment.Map;

}
if (_map != null)
{
//定位置台北101
_map.MapType = GoogleMap.MapTypeNormal;
CameraUpdate cameraUpdate = CameraUpdateFactory.NewLatLngZoom(new LatLng(25.033611, 121.565000), 15);
_map.MoveCamera(cameraUpdate);
}
};

}
}
}

這邊我就不贅述
結果:
Screenshot_2014-02-07-17-27-27

範例下載:

參考:

http://docs.xamarin.com/guides/android/platform_features/maps_and_location/


當麻許的超技八 2014 | Donma Hsu Design.