android - Xamarin Forms WebView Geolocation issue

Question

Welcome To Ask or Share your Answers For Others

android - Xamarin Forms WebView Geolocation issue

posted Oct 24, 2021 in Technique[技术] by 深蓝 (71.8m points)

android - Xamarin Forms WebView Geolocation issue

I'm trying to enable a webview within a xamarin forms app to get the current GPS coordinates of an android device. Currently the webview/website will return the GPS coordinates when opened in a chrome browser on the phone or a laptop, however within the app will not. Trying to get this working as simply as possible and to expand on it after.

Code so far: XAML page:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="UITrial.Page2"
             BackgroundColor = "#f0f0ea">
    <Label Text="{Binding MainText}" VerticalOptions="Center" HorizontalOptions="Center" />

  <WebView Source="https://danu6.it.nuigalway.ie/OliverInternetProgramming/project/Loginproject.html" />

</ContentPage>

HTML PAGE:

<!DOCTYPE html>
<html>
<body>

<p>Click the button to get your coordinates.</p>

<button onclick="getLocation()">Try It</button>

<p id="demo"></p>

<script>
var x = document.getElementById("demo");

function getLocation() {
    if (navigator.geolocation) {
        navigator.geolocation.watchPosition(showPosition);
    } else { 
        x.innerHTML = "Geolocation is not supported by this browser.";}
    }

function showPosition(position) {
    x.innerHTML="Latitude: " + position.coords.latitude + 
    "<br>Longitude: " + position.coords.longitude;
}
</script>

</body>
</html>

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

1 Reply

深蓝 · Answer 1 · 2021-10-23T19:38:24+0000

Currently the webview/website will return the GPS coordinates when opened in a chrome browser on the phone or a laptop, however within the app will not.

You need to use a custom WebChromeClient for WebView in Droid project. Please refer to Android WebView Geolocation.

In Xamarin.Forms you can follow the below steps to accomplish this:

Create a custom Control for WebView in PCL project:

public class GeoWebView:WebView
{
}

And use it in Xaml:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
         xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
         xmlns:local="clr-namespace:WebViewFormsDemo"
         x:Class="WebViewFormsDemo.MainPage">
<local:GeoWebView 
    Source="https://danu6.it.nuigalway.ie/OliverInternetProgramming/project/Loginproject.html"></local:GeoWebView>

Create a Custom Renderer for GeoWebView in Droid Project like below:

[assembly:ExportRenderer(typeof(GeoWebView),typeof(GeoWebViewRenderer))]
namespace WebViewFormsDemo.Droid
{
    public class GeoWebViewRenderer:WebViewRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs<Xamarin.Forms.WebView> e)
        {
            base.OnElementChanged(e);
            Control.Settings.JavaScriptEnabled = true;
            Control.SetWebChromeClient(new MyWebClient());
        }
    }

    public class MyWebClient : WebChromeClient
    {
        public override void OnGeolocationPermissionsShowPrompt(string origin, GeolocationPermissions.ICallback callback)
        {
            callback.Invoke(origin, true, false);
        }
    }
}

Add Permissions to AndroidManifest.xml:

<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />

Then you will get your location in webview correctly.

Categories

android - Xamarin Forms WebView Geolocation issue

android - Xamarin Forms WebView Geolocation issue

Please log in or register to add a comment.

Please log in or register to reply this article.

1 Reply

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags