在Xamarin中使用Google Map

Posted 2021-04-02

我试图在Xamarin for android中使用谷歌地图API，到目前为止它一直是一个吸引人的经历。我是Xamarin的新手并试图掌握它。我测试了一些基本的控件，它们似乎工作正常。现在我正在尝试使用Google Map Api。我已根据Xamarin文档在AndroidManifest.xml中插入了Api密钥。我在Main.axml文件中有以下代码

<?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="match_parent"
        android:layout_height="match_parent"
        class="com.google.android.gms.maps.MapFragment" />
</LinearLayout>

这是我的活动课

[Activity (Label = "Testing", MainLauncher = true)]
    public class MainActivity : Android.GoogleMaps.MapActivity
    {

        protected override bool IsRouteDisplayed {
            get {
                return false;
            }
        }

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


            SetContentView (Resource.Layout.Main);

            // Get our button from the layout resource,
            // and attach an event to it
            //Button button = FindViewById<Button> (Resource.Id.myButton);

            //button.Click += delegate {
            //    button.Text = string.Format ("{0} clicks!", count++);
            //};
        }
    }

当我运行上面的代码时，它会抛出异常

Android.Views.InflateException: Loading

我没有像在VS中通常那样得到错误的任何细节。我不知道出了什么问题我现在只是盲目地关注文档，在屏幕上看到一些东西然后玩它但是我猜不会发生这种情况！

我针对此测试项目定位了Google API版本8。

请建议我在这里缺少什么？

答案

如果您使用的是Google Maps V2，请查看此页面：http://components.xamarin.com/view/googleplayservices/

如果您的目标是API 8，请不要忘记引用Mono.Android.Support.v4，并相应地使用这些元素！

这是我的布局的样子：

<FrameLayout
        android:id="@+id/mapView"
        android:layout_width="fill_parent"
        android:layout_height="match_parent"
        android:clickable="true"
        android:longClickable="true"
        android:layout_below="@+id/textLayout"
        android:layout_above="@+id/footerLayout" />

而我的班级：

public class GoogleMapActivity : Android.Support.V4.App.FragmentActivity
{
      protected override void OnCreate(Bundle bundle)
      {
        var fragTx = SupportFragmentManager.BeginTransaction();
        var mapFragment = Android.Gms.Maps.SupportMapFragment.NewInstance(mapOptions);
        fragTx.Add(Resource.Id.mapView, mapFragment, "mapView");
        fragTx.Commit();
      }
 }

另一答案

这不是你的问题的答案，而是另一种选择;

我一直在使用leaflet和/或mapbox的OpenStreetMaps使用xamarin而不是android。虽然我不确定你是否可以过滤加油站等。

这是我用来渲染移动地图的代码片段;

public class MainActivity : Activity//, ILocationListener
{
    private WebView _webView;
    private MonkeyWebViewClient _webViewClient;
    private MonkeyWebChromeClient _webChromeClient;

    ...

    protected override void OnCreate (Bundle bundle)
    {
        Log.Verbose (LogAppTag, "Init webview..");
        _webView = FindViewById<WebView> (Resource.Id.webView1);
        _webView.Settings.javascriptEnabled = true;

        _webViewClient = new MonkeyWebViewClient (this);
        _webChromeClient = new MonkeyWebChromeClient ();
        _webViewClient.OnLoadComplete += WebLoadComplete;

        _webView.SetWebViewClient(_webViewClient);
        _webView.SetWebChromeClient(_webChromeClient);      

        _webView.LoadUrl("file:///android_asset/Content/Map/Map.html");

    ...

    void WebLoadComplete (object sender, EventArgs e)
    {
        Log.Verbose(Logging.AppTag, "WebLoadComplete()");
        _webView.LoadUrl("javascript:SetLocation(" + _location.Latitude + "," + _location.Longitude + ");");    
    }
    ...
    class MonkeyWebChromeClient : WebChromeClient {
        public override bool OnJsAlert(WebView view, string url, string message, JsResult result)
        {
            // the built-in alert is pretty ugly, you could do something different here if you wanted to
            return base.OnJsAlert(view, url, message, result);
        }
    }

    class MonkeyWebViewClient : WebViewClient 
    {
        public bool LoadingFinished { get; private set; }

        public delegate void LoadCompleteHandler(object sender, EventArgs e);
        public event LoadCompleteHandler OnLoadComplete;

        Activity context;

        public MonkeyWebViewClient(Activity context)
        {
            this.context = context;
        }
        public override bool ShouldOverrideUrlLoading(WebView view, string url)
        {
            view.LoadUrl (url);
            return true;
        }

        public override void OnPageStarted (WebView view, string url, Android.Graphics.Bitmap favicon)
        {
            this.LoadingFinished = false;
            base.OnPageStarted (view, url, favicon);
        }

        public override void OnPageFinished (WebView view, string url)
        {
            this.LoadingFinished = true;

            var handler = OnLoadComplete;
            if (handler != null) handler(this, EventArgs.Empty);

            base.OnPageFinished (view, url);
        }
    }

这是我们在webview中加载的html代码;

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />   
<!-- mapbox -->
<script src='http://api.tiles.mapbox.com/mapbox.js/v1.3.1/mapbox.js'></script>
<link href='http://api.tiles.mapbox.com/mapbox.js/v1.3.1/mapbox.css' rel='stylesheet' />    
<!-- mapbox -->
    </head>
<style>
    body {
        padding: 0;
        margin: 0;
    }
    html, body, #map {
        height: 100%;
    }
</style>
<div id="map"></div>        
<script src="JS/Map.js"></script>           
 </html>

和可以与C＃代码通信的JS代码;你可能想在mapbox上创建一个新的地图并更改raistlinthewiz.map-oukwofv3部分。

    // map code.            
function SetLocation(lat, lng)
{
    var latlng = new L.LatLng(parseFloat(lat), parseFloat(lng));

    // mapbox
    var map = L.mapbox.map('map', 'raistlinthewiz.map-oukwofv3').setView(latlng, 18);                   

    L.mapbox.markerLayer({ // this feature is in the GeoJSON format: see geojson.org for the full specification
        type: 'Feature',
        geometry: {
            type: 'Point', // coordinates here are in longitude, latitude order because x, y is the standard for GeoJSON and many formats
            coordinates: [parseFloat(lng), parseFloat(lat)]
        },
        properties: { // one can customize markers by adding simplestyle properties http://mapbox.com/developers/simplestyle/
            title: 'A Single Marker',
            description: 'Just one of me',              
            'marker-size': 'large'
        }
    }).addTo(map);
}

如果您还需要，我可以提供使用香草小叶的样品。