android webview geolocation

검색어 : android webview geolocation

Enable Geolocation in a WebView (Android)

http://turbomanage.wordpress.com/2012/04/23/how-to-enable-geolocation-in-a-webview-android/

Posted by David Chandler on April 23, 2012

HTML5 Geolocation lets you access the browser’s location information from Javascript. For a quick demo, visit google.com in a mobile browser and observe your location at the bottom of the page. Geolocation works “out of the box” in the Android browser or Chrome Beta for Android. The first time you visit a Web site that wants to know your location, the browser will prompt you to allow it.

However, if you’re writing an Android app that uses a WebView to display Web content, you must specifically enable geolocation in the WebView in order for pages that use it to work properly. To illustrate, I’ve put together a minimal Android app that uses a WebView with geolocation enabled. The easiest way to use the sample is to create a new Android Project called GeoWebView (package name com.example.webview) and then copy and replace the generated sample code with the files below.

First, the Android manifest:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27

<?xml version="1.0" encoding="utf-8"?> <manifest xmlns:android="http://schemas.android.com/apk/res/android"     package="com.example.webview"     android:versionCode="1"     android:versionName="1.0" >       <uses-sdk android:minSdkVersion="5" />       <uses-permission android:name="android.permission.INTERNET" />     <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />       <application         android:icon="@drawable/ic_launcher"         android:label="@string/app_name" >         <activity             android:name=".GeoWebViewActivity"             android:label="@string/app_name"             android:theme="@android:style/Theme.NoTitleBar" >             <intent-filter>                 <action android:name="android.intent.action.MAIN" />                   <category android:name="android.intent.category.LAUNCHER" />             </intent-filter>         </activity>     </application>   </manifest>

Only two permissions are required: INTERNET and ACCESS_FINE_LOCATION. This example uses the NoTitleBar theme to display the WebView content full screen.

Next, our layout (main.xml):

1 2 3 4 5

<?xml version="1.0" encoding="utf-8"?> <WebView xmlns:android="http://schemas.android.com/apk/res/android"     android:id="@+id/webView1"     android:layout_width="fill_parent"     android:layout_height="fill_parent" />

Not much to it, just a WebView.

And finally, here is the complete app, consisting only of GeoWebViewActivity:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73

package com.example.webview;   import android.app.Activity; import android.os.Bundle; import android.webkit.GeolocationPermissions; import android.webkit.WebChromeClient; import android.webkit.WebView; import android.webkit.WebViewClient;   /**  * A minimal WebView app with HTML5 geolocation capability  *  * @author David M. Chandler  */ public class GeoWebViewActivity extends Activity {       /**      * WebViewClient subclass loads all hyperlinks in the existing WebView      */     public class GeoWebViewClient extends WebViewClient {         @Override         public boolean shouldOverrideUrlLoading(WebView view, String url) {             // When user clicks a hyperlink, load in the existing WebView             view.loadUrl(url);             return true;         }     }       /**      * WebChromeClient subclass handles UI-related calls      * Note: think chrome as in decoration, not the Chrome browser      */     public class GeoWebChromeClient extends WebChromeClient {         @Override         public void onGeolocationPermissionsShowPrompt(String origin,                 GeolocationPermissions.Callback callback) {             // Always grant permission since the app itself requires location             // permission and the user has therefore already granted it             callback.invoke(origin, true, false);         }     }       WebView mWebView;       /** Called when the activity is first created. */     @Override     public void onCreate(Bundle savedInstanceState) {         super.onCreate(savedInstanceState);         setContentView(R.layout.main);         mWebView = (WebView) findViewById(R.id.webView1);         // Brower niceties -- pinch / zoom, follow links in place         mWebView.getSettings().setJavaScriptCanOpenWindowsAutomatically(true);         mWebView.getSettings().setBuiltInZoomControls(true);         mWebView.setWebViewClient(new GeoWebViewClient());         // Below required for geolocation         mWebView.getSettings().setJavaScriptEnabled(true);         mWebView.getSettings().setGeolocationEnabled(true);         mWebView.setWebChromeClient(new GeoWebChromeClient());         // Load google.com         mWebView.loadUrl("http://www.google.com");     }       @Override     public void onBackPressed() {         // Pop the browser back stack or exit the activity         if (mWebView.canGoBack()) {             mWebView.goBack();         }         else {             super.onBackPressed();         }     } }

The onCreate() method obtains the WebView and enables Javascript and pinch/zoom. The last few lines before loading the URL google.com are the most important. In addition to calling setGeolocationEnabled(true), we configure the WebView by passing it two kinds of “clients”: a chrome client, which handles UI, or “chrome”, events (no relation to the browser bearing that name) for your WebView, and a basic client, which handles content-related events such as errors and form resubmission.

First, let’s look at the WebViewClient as implemented in the inner class GeoWebViewClient. It’s not strictly necessary for geolocation, but does something that almost all WebView apps do, which is to load any new URLs (such as when the user touches a hyperlink) in the same WebView. The default behavior is to fire an Intent to load in another browser, which is rarely what you want.

Next, a WebChromeClient as implemented in GeoWebChromeClient is essential for geolocation to work in the WebView. Whenever the WebView encounters Javascript using the Geolocation API, the WebView calls the method onGeolocationPermissionsShowPrompt() in its associated WebChromeClient. The name of the method is slightly misleading in this context, as neither the WebView nor the WebChromeClient actually shows a prompt. If you want to show a prompt, this is the place to do it, and you can find an example in the AOSP source code for packages/apps/Browser/src/com/android/browser/Tab.java. Fortunately, since the app itself declares the ACCESS_FINE_LOCATION permission, the user has effectively already granted permission, and you can simply invoke the callback with the second argument (allow) == true.

The final touch on our app is to wire up the phone’s back button in the onBackPressed() method. If we can go back in the WebView, we do that; otherwise, we back out of the app altogether.

Thanks to Roman Nurik and several others on StackOverflow for your helpful past answers on this topic.

---

google maps javascript v3을 이용한 geolocation (지오로케이션)

http://answerofgod.tistory.com/18

MyLocationMap.zip

 

구글맵스 v3관련 자료 찾아보니 폰갭이니 하는 하이브리드 앱을 써야 쉽게 되는듯..

 

그래도 간단하게 해보자는 심정으로 이리저리 뒤지고 다녔더니 결국 완성했다. ㅎ

 

기본 소스는 구글 API 레퍼런스에서 가져왔다.

 

자세한건 이쪽에->> google api page.

 

MainActivity에는 웹뷰와 위치를 찾기위한 퍼미션을 추가했다.

 

참고한 사이트는 이곳 ->> site

 

실행모습

 

 

소스는 아주 간단하다..

 

 

MainActivity.java

public  class MainActivity extends Activity implements GeolocationPermissions.Callback {
   
   
    WebView mapview;    //just webview.
    String url="file:///android_asset/www/index.html";  //local html file
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
       
       
        mapview=(WebView) findViewById(R.id.mapview);   //casting webview
        mapview.getSettings().setJavaScriptEnabled(true);                       //webview options
        mapview.getSettings().setGeolocationEnabled(true);                      //
        mapview.getSettings().setJavaScriptCanOpenWindowsAutomatically(true);   //
       
        Geoclient geoclient=new Geoclient();    //casting class
       
        mapview.setWebChromeClient(geoclient);  //set webchromeclient for permission
        String origin="";  
        geoclient.onGeolocationPermissionsShowPrompt(origin,this);  //for permission
        mapview.loadUrl(url);
    }
        public void invoke(String origin, boolean allow, boolean retain) {
       
       
    }
       
    class Geoclient extends WebChromeClient{    //for display mylocation
        @Override
        public void onGeolocationPermissionsShowPrompt(String origin,Callback callback){
           
            super.onGeolocationPermissionsShowPrompt(origin, callback);
            callback.invoke(origin,true,false);
        }
       
    }
 }

index.html(js 부분)

var map;
 
function initialize() {
  var mapOptions = {
    zoom: 15
  };
  map = new google.maps.Map(document.getElementById('map-canvas'),
      mapOptions);
 
  // Try HTML5 geolocation
  if(navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
      var pos = new google.maps.LatLng(position.coords.latitude,
                                       position.coords.longitude);
 
      var infowindow = new google.maps.InfoWindow({
        map: map,
        position: pos,
        content: 'Location found using HTML5.'
      });
 
      map.setCenter(pos);
    }, function() {
      handleNoGeolocation(true);
    });
  } else {
    // Browser doesn't support Geolocation
    handleNoGeolocation(false);
  }
}
 
function handleNoGeolocation(errorFlag) {
  if (errorFlag) {
    var content = 'Error: The Geolocation service failed.';
  } else {
    var content = 'Error: Your browser doesn\'t support geolocation.';
  }
 
  var options = {
    map: map,
    position: new google.maps.LatLng(60, 105),
    content: content
  };
 
  var infowindow = new google.maps.InfoWindow(options);
  map.setCenter(options.position);
}
 
google.maps.event.addDomListener(window, 'load', initialize);