Xamarin.Forms 調用 騰訊地圖SDK

Xamarin.Forms研究了好一段時間了，最近一直在學習中，想嘗試一下調用其他的SDK，就如騰訊地圖SDK（申請容易）。

完成此次項目得感謝以下鏈接：

http://www.cnblogs.com/jtang/p/4698496.html

其他文檔參考：

騰訊地圖SDK（安卓）文檔 這裡面有詳細的使用過程（當然裡面的代碼是不適用C#的，不過要從這裡下載SDK，也有如何申請Key的過程，請參考閱讀）

Xamarin.Forms自定義每個平臺的控制項文檔 裡面有如何根據不同的平臺條件下，調用其他頁面的過程

Xamarin.Android綁定Java庫文檔 這裡面是把其他軟體的SDK Jar包轉化為 C# DLL的過程，轉換了才可用（當然還有看IOS和Windows的，不過博主的手機是安卓，方便調試）

萬事具備後，開始調用騰訊地圖了。

1、創建一個Cross-Platform項目(Xamarin.Forms模板，PCL項目）博主是Xamarin_Setup 2.3.0.XXX（2017-2-23日晚更新的）版本，如果用VS2017開發，也是這個創建界面，如果是VS2015，而且更新了最新版的Xamarin，也是這個新的創建界面，下一個界面繼續選擇PCL或SAP；如果是VS2015 而且Xamarn的版本是2.2.X.XXX，就會在第一個界面顯示所有的選項，也是選Xamarin Forms Xaml ( Portable Class Labrary )就可以了。

2、創建項目後，先生成運行一遍，建議直接用手機調試（沒錯，博主用的是紅米3）。如果這樣都不能調試運行成功的話，建議先配置好自己的環境，不然下麵做不下了。

3、右擊解決方案，新建一個項目，用來把騰訊地圖的jar轉換成DLL。

4、創建完成後，在騰訊官網下載的SDK裡面的libs文件夾裡面有相應 .jar文件，添加到Jars文件夾，並且把jar文件的生成操作改為EmbeddedJar。

5、右擊TencentMapDemo.AndroidJavaBinding項目，點擊生成，發現報了一些錯誤和警告（警告有多少都不用管，不影響調用）

6、隨便點擊第一個錯誤，會轉到 Com.Tencent......MapController.cs，其實錯誤很明顯，就是含有相同的函數名，調用的使用不知道調用哪一個函數。至於這個是為什麼，沒有深入研究，希望大神能解答一下。好了，我們直接把這個類的所有方法刪除，就留下一個空類就好了。

 7、右擊TencentMapDemo.AndroidJavaBinding項目，點擊生成，生成成功後，在當前項目的文件目錄裡面/bin/debug/，生成了一個DLL，這個就是我們要調用的庫。

8、右擊安卓項目，把剛纔的DLL添加到引用裡面。

 9、右擊Android，打開屬性，在 Android清單 裡面的許可權，勾選以下許可權。

 10、在Android項目里，創建一個類：TencentMapRenderer.cs，代碼引用參考如下，請註意註釋。

  1 using System;
  2 using System.Collections.Generic;
  3 using System.Linq;
  4 using System.Text;
  5 
  6 using Android.App;
  7 using Android.Content;
  8 using Android.OS;
  9 using Android.Runtime;
 10 using Android.Views;
 11 using Android.Widget;
 12 using Xamarin.Forms.Platform.Android;
 13 using Xamarin.Forms;
 14 using TencentMapDemo;
 15 using TencentMapDemo.Droid;
 16 using Com.Tencent.Tencentmap.Mapsdk.Map;
 17 using Com.Tencent.Mapsdk.Raster.Model;
 18 
 19 //ExportRenderer向自定義渲染器類添加屬性以指定它將用於渲染Xamarin.Forms自定義地圖。此屬性用於向Xamarin.Forms註冊自定義渲染器。第一個是用來承載的界面，第二個是要引用的界面
 20 [assembly: ExportRenderer(typeof(MainPage), typeof(TencentMapRenderer))]
 21 namespace TencentMapDemo.Droid
 22 {
 23     public class TencentMapRenderer : PageRenderer
 24     {
 25         /// <summary>
 26         /// 騰訊地圖視圖
 27         /// </summary>
 28         private MapView mapView;
 29 
 30         /// <summary>
 31         /// 佈局
 32         /// </summary>
 33         private LinearLayout layout;
 34 
 35         protected override void OnElementChanged(ElementChangedEventArgs<Page> e)
 36         {
 37             base.OnElementChanged(e);
 38 
 39             if (e.NewElement == null || e.OldElement != null)
 40             {
 41                 return;
 42             }
 43 
 44             //e.NewElement就是承載的界面，這裡就是PCL項目裡面的MainPage
 45             var mainPage = e.NewElement as MainPage;
 46 
 47             //初始化mapView
 48             mapView = new MapView(this.Context);
 49             mapView.OnCreate(null);
 50 
 51             //初始化視圖
 52             layout = new LinearLayout(this.Context);
 53             layout.AddView(mapView);
 54             this.AddView(layout);
 55 
 56             //這裡可以比對以下我們的寫法跟騰訊官網裡Java寫法的區別，可以看出Java裡面的屬性是set,get首碼，而在C#裡面都被隱藏了，直接用C#慣用的屬性寫法來代替，而方法則還是同樣的SetXXX(),GetXXX()，但是Java是camelCasing，C#用PascalCasing寫法（博主非常喜歡C#寫法，而很討厭Java的寫法 :-)）。這些區別，都是Xamarin 里 綁定Java庫的轉換規則。 
 57 
 58             #region TencentMap類
 59             //騰訊地圖的設置是通過TencentMap類進行設置，可以控制地圖的底圖類型、顯示範圍、縮放級別、添加 / 刪除marker和圖形，此外對於地圖的各種回調監聽也是綁定到TencentMap。下麵是TencentMap類的使用示例：
 60 
 61             //獲取TencentMap實例
 62             TencentMap tencentMap = mapView.Map;
 63             //設置實時路況開啟
 64             tencentMap.TrafficEnabled = true;
 65             //設置地圖中心點
 66             tencentMap.SetCenter(new Com.Tencent.Mapsdk.Raster.Model.LatLng(22.500980, 113.057899));
 67             //設置縮放級別
 68             tencentMap.SetZoom(11);
 69             #endregion
 70 
 71             #region UiSettings類
 72             //UiSettings類用於設置地圖的視圖狀態，如Logo位置設置、比例尺位置設置、地圖手勢開關等。下麵是UiSettings類的使用示例：
 73 
 74             //獲取UiSettings實例
 75             UiSettings uiSettings = mapView.UiSettings;
 76             //設置logo到屏幕底部中心
 77             uiSettings.SetLogoPosition(UiSettings.LogoPositionCenterBottom);
 78             //設置比例尺到屏幕右下角
 79             uiSettings.SetScaleViewPosition(UiSettings.ScaleviewPositionRightBottom);
 80             //啟用縮放手勢(更多的手勢控制請參考開發手冊)
 81             uiSettings.SetZoomGesturesEnabled(true);
 82             #endregion
 83 
 84             #region 使用marker
 85             //註意，這裡要往resources/drawable/里添加一個red_location.png的圖片
 86             var bitmap = Resources.GetBitmap("red_location.png");
 87             BitmapDescriptor des = new BitmapDescriptor(bitmap);
 88             foreach (var item in mainPage.Options)
 89             {
 90                 MarkerOptions options = new MarkerOptions();
 91                 
 92                 options.InvokeIcon(des);
 93                 options.InvokeTitle(item.Title);
 94                 options.Anchor(0.5f, 0.5f);
 95                 options.InvokePosition(new LatLng(item.Lat, item.Lng));
 96                 options.Draggable(true);
 97                 Marker marker = mapView.AddMarker(options);
 98                 marker.ShowInfoWindow();
 99             }
100 
101             #endregion
102 
103         }
104 
105         protected override void OnLayout(bool changed, int l, int t, int r, int b)
106         {
107             base.OnLayout(changed, l, t, r, b);
108             var msw = Android.Views.View.MeasureSpec.MakeMeasureSpec(r - l, MeasureSpecMode.Exactly);
109             var msh = Android.Views.View.MeasureSpec.MakeMeasureSpec(b - t, MeasureSpecMode.Exactly);
110             layout.Measure(msw, msh);
111             layout.Layout(0, 0, r - l, b - t);
112         }
113     }
114 }

 11、在Andriod項目，雙擊打開Properties里的AndroidManifest.xml，在<application><application>里添加在騰訊申請的Key（如果不添加，則會在地圖中，有一個警告文字出現）

<meta-data android:name="TencentMapSDK" android:value="你申請的Key"/>

12、在PCL項目里，修改App.xaml，代碼如下：

 1         public App()
 2         {
 3             InitializeComponent();
 4 
 5             var options = new List<Option>(){
 6                 new Option() { Title="新會區",Lat=22.458680,Lng=113.032400},
 7                 new Option() { Title="蓬江區",Lat=22.594994,Lng=113.071976},
 8                 new Option() {Title="江海區",Lat=22.549977,Lng=113.117981 }
 9             };
10 
11 
12             MainPage = new NavigationPage(new MainPage() { Options = options });
13         }

13、在PCL項目里，修改MainPage.xaml，代碼如下：

1 <?xml version="1.0" encoding="utf-8" ?>
2 <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
3              xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
4              xmlns:local="clr-namespace:TencentMapDemo"
5              x:Class="TencentMapDemo.MainPage"
6              Title="騰訊地圖調用Demo">
7     <!--這裡把預設的Label刪除-->
8 </ContentPage>

 1 using System;
 2 using System.Collections.Generic;
 3 using System.Linq;
 4 using System.Text;
 5 using System.Threading.Tasks;
 6 using Xamarin.Forms;
 7 
 8 namespace TencentMapDemo
 9 {
10     public partial class MainPage : ContentPage
11     {
12         public IEnumerable<Option> Options;
13 
14         public MainPage()
15         {
16             InitializeComponent();
17         }   
18     }
19 
20     /// <summary>
21     /// 標記類
22     /// </summary>
23     public class Option
24     {
25         /// <summary>
26         /// 標題
27         /// </summary>
28         public string Title { get; set; }
29 
30         /// <summary>
31         /// 緯度
32         /// </summary>
33         public double Lat { get; set; }
34 
35         /// <summary>
36         /// 經度
37         /// </summary>
38         public double Lng { get; set; }
39 
40     }
41 }

14、最後生成並調試，效果如下：

如果有任何問題，可以拍磚（不過博主很少登錄查留言的），最好還是聯繫我的QQ吧：492683562