Xamarin.Forms 調用騰訊地圖SDK

時間 2019-12-14

標籤 xamarin.forms xamarin forms 調用騰訊地圖 sdk 欄目騰訊简体版

原文原文鏈接

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

完成這次項目得感謝如下連接：java

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

其餘文檔參考：app

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

Xamarin.Forms自定義每一個平臺的控件文檔裏面有如何根據不一樣的平臺條件下，調用其餘頁面的過程函數

Xamarin.Android綁定Java庫文檔這裏面是把其餘軟件的SDK Jar包轉化爲 C# DLL的過程，轉換了纔可用（固然還有看IOS和Windows的，不過博主的手機是安卓，方便調試）佈局

萬事具有後，開始調用騰訊地圖了。學習

一、建立一個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 )就能夠了。ui

二、建立項目後，先生成運行一遍，建議直接用手機調試（沒錯，博主用的是紅米3）。若是這樣都不能調試運行成功的話，建議先配置好本身的環境，否則下面作不下了。this

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

四、建立完成後，在騰訊官網下載的SDK裏面的libs文件夾裏面有相應 .jar文件，添加到Jars文件夾，而且把jar文件的生成操做改成EmbeddedJar。

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

六、隨便點擊第一個錯誤，會轉到 Com.Tencent......MapController.cs，其實錯誤很明顯，就是含有相同的函數名，調用的使用不知道調用哪個函數。至於這個是爲何，沒有深刻研究，但願大神能解答一下。好了，咱們直接把這個類的全部方法刪除，就留下一個空類就行了。

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

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

九、右擊Android，打開屬性，在 Android清單裏面的權限，勾選如下權限。

十、在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 }

View Code

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

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

十二、在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         }

1三、在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 }