Answer's Engineering Blog: location

Feb 13, 2014

My Location&My Path app(do it android mission 20)

This app is display my current moving path on map.

If you run the app the app displays 3 button and 1 input text.

If you touched 'rec' button then app getting your location using GPS or Network every 3 second.

And app save in database that displays your moving path on map using polyline.

If you touched 'stop' button then app delete polyline and database.

This picture is normal state(you run the app)

This picture is touched 'rec'button

This picture is touched 'stop' button

1. Using Database

Adding MainActivity.java code for using database

MainActivity.java

mapview.getSettings().setDatabasePath("/data/data/"+this.getPackageName()+"/databases/");
mapview.getSettings().setDomStorageEnabled(true);
mapview.getSettings().setDatabaseEnabled(true);
mapview.getSettings().setAppCacheEnabled(true);

It code need for using database.

and need a javascrpit code

index.html

function setdatabase(){
getMylocation();
var sumlatlnt=curLat+","+curLng;
localStorage.setItem(keycnt,sumlatlnt);
keycnt++;
}

important is "localStorage.setItem(key,value)"

This code is record to database.

and if you reading value in database

You need a this code

"var temp=localStorage.getItem(key)"

and remove code is
"localStorage.removeItem(key)"

2. overlay using polyline

It's simple drawing polyline using google maps API

you just add this code to initialize

var polyOptions = {
strokeColor: '#000000',
strokeOpacity: 1.0,
strokeWeight: 3
};
poly = new google.maps.Polyline(polyOptions);
poly.setMap(map);
path = poly.getPath();

you possible to reference google API about polyOption.

and adding event function "path.push(event.latLng);"

But I used another method.

if(navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
curLat=position.coords.latitude;
curLng=position.coords.longitude;
var newpos = new google.maps.LatLng(curLat,curLng);
map.setCenter(newpos);
path.push(newpos);
}, function() {
handleNoGeolocation(true);
});
} else {
handleNoGeolocation(false);
}

because I want my current location using gps

"path.push(latLng)" is draw polyline on map.

And "path.clear()" is clear polyline on map.

Feb 12, 2014

Get my location using geocoding& reverse geocoding

한글 블로그로 보기

MyLocationMap.zip

This app is get mylocation and my address using reverse geocoding.

You will typing for want place. This app find that place using geocoding.

And you see icon(starbucks and kfc) using overlay.

If you running the app that will see message(GPS coordinate)

And you touched check button that will see your location address

using reverse geocoding

If you typing place that will see that place map&marker.

This is index.html file

<!DOCTYPE html>
<html>
<head>
<title>Geolocation</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
#panel {
position: absolute;
top: 5px;
left: 50%;
margin-left: -180px;
z-index: 5;
background-color: #fff;
padding: 5px;
border: 1px solid #999;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true"></script>
<script>
var map;
var pos;
var marker;
var starbuckslatlng;
var kfclatlng;
var geocoder;
function initialize() {
var mapOptions = {
zoom: 15
};
var curLat;
var curLng;
geocoder = new google.maps.Geocoder();
map = new google.maps.Map(document.getElementById('map-canvas'),mapOptions);
if(navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
curLat=position.coords.latitude;
curLng=position.coords.longitude;
alert("My location is\nlatitude:"+curLat+"\nlongitude:"+curLng);
pos = new google.maps.LatLng(curLat,curLng);
marker = new google.maps.Marker({
map: map,
//animation: google.maps.Animation.BOUNCE,
position: pos
});
map.setCenter(pos);
reverseGeocode(curLat,curLng);
}, function() {
handleNoGeolocation(true);
});
} else {
handleNoGeolocation(false);
}
addItem();
}
function reverseGeocode(relat,relng){ //for reverse Geocoding
var regeocoder = new google.maps.Geocoder();
var relatlng=new google.maps.LatLng(relat,relng);
var info = new google.maps.InfoWindow({
map: map,
position: relatlng
});
regeocoder.geocode({ 'latLng': relatlng}, function(results, status){
if(status == google.maps.GeocoderStatus.OK){
if(results[1]){
info.setContent(results[1].formatted_address);
info.open(map,marker);
}else{
alert("Geocoder failed due to:"+status);
}
}
});
}
function addItem(){ //for add Item(overlay)
starbuckslatlng=new google.maps.LatLng(35.218,128.6);
kfclatlng=new google.maps.LatLng(35.215,128.6);
starbucksMap=new google.maps.Marker({
position:starbuckslatlng,
icon:'starbucks.jpg',
map:map
});
kfcMap=new google.maps.Marker({
position:kfclatlng,
icon:'kfc.jpg',
map:map
});
google.maps.event.addListener(starbucksMap,'click',function(){
alert("여기는 스타벅스입니다");
});
google.maps.event.addListener(kfcMap,'click',function(){
alert("여기는 kfc입니다");
});
}
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(35, 125),
content: content
};
var infowindow = new google.maps.InfoWindow(options);
map.setCenter(options.position);
}
function codeAddress() { //for Geocoding
var address = document.getElementById('address').value;
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var marker2 = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
var infowindow=new google.maps.InfoWindow({
map:map,
position: results[0].geometry.location,
content:address
});
infowindow.open(map,marker2);
} else {
alert('Geocode was not successful for the following reason: ' + status);
}
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="panel">
<input id="address" type="textbox" value="창원시청">
<input type="button" value="Go!!" onclick="codeAddress()">
</div>
<div id="map-canvas"></div>
</body>
</html>

This is mainactivity.java

package com.answerofgod.mymapgeocode;
import android.app.Activity;
import android.os.Bundle;
import android.webkit.GeolocationPermissions;
import android.webkit.GeolocationPermissions.Callback;
import android.webkit.WebChromeClient;
import android.webkit.WebView;
// for using geolocation method
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);
}
}
}

Answer's Engineering Blog

Labels

Feb 13, 2014

My Location&My Path app(do it android mission 20)

Feb 12, 2014

Get my location using geocoding& reverse geocoding

google groups

Page View

한글 블로그