Microsoft PowerPoint - Lab 2-3 Android Google Maps.ppt [相容模式]

Size: px

Start display at page:

Download "Microsoft PowerPoint - Lab 2-3 Android Google Maps.ppt [相容模式]"

镒剖班
5 years ago
Views:

1 車輛定位與電子地圖整合服務定位與 Google Maps Network Optimization Lab Department of Computer Science National Chiao Tung University 1 定位與 Google Maps Lab 簡介 : 路徑軌跡記錄程式 Google Maps 程式技巧取得目前位置經緯度建立 Google Maps 標示目前位置 Marker 的使用畫直線實習時間 2

2 Lab 簡介 : 路徑軌跡記錄程式 Google Maps 程式技巧取得目前位置經緯度建立 Google Maps 標示目前位置 Marker 的使用畫直線成果展示在 eclipse 中 import 本次課程範例專案 GoogleMap, 然後執行程式 3 模擬 GPS 輸入 Emulator 並不是真正的手機, 因此無法收得 GPS 訊號使用 Emulator 來模擬 GPS 輸入在 eclipse 中點選 Window -> Show View -> Other... 點選 Android -> Emulator Control, 然後按 OK 剛開啟程式, 無 GPS 訊號, 無法記錄軌跡 4

3 手動輸入 GPS 經緯度在 Location Controls 中輸入經緯度 Longitude: Latitue: 點選 Send Emulator 就會接收到輸入的 GPS 位置 5 程式技巧 : 取得目前位置經緯度於 AndroidManifest.xml 註冊服務 ACCESS_FINE_LOCATION ACCESS_COARSE_LOCATIONCOARSE 位置程式碼的撰寫宣告及取得系統服務申請及移除週期性回報位置 Location Listener 6

4 於 AndroidManifest.xml 註冊服務於 <manifest> 標籤底下註冊 ACCESS_FINE_LOCATION 許可程式可獲得存取精確位置 (GPS) ACCESS_COARSE_LOCATION 許可程式可獲得存取不精確位置 ( 基地台 ) 7 宣告及取得系統服務 Import 變數宣告取得系統服務取得系統最近獲得的位置 8

5 程式碼解說 mgr = (LocationManager)getSystemService(LOCATION_SERVICE); 利用 Context 類別的 getsystemservice 取得 Location Manager 的物件實體 Criteria criteria = new Criteria(); best = mgr.getbestprovider(criteria, true); Android 系統會有多個定位提供者,Criteria 類別是用來讓開發者設定其對定位提供者的偏好 ( 如省電考量 ) mgr.getbestprovider() 根據 Criteria 物件的內容, 回傳最符合開發者偏好的定位提供者, 回傳為值 String type, 代表 provider 的名稱 public Location getlastknownlocation (String provider) 根據開發者所傳入的 provider, 來回傳出此 provider 最近獲得的位置 9 申請及移除週期性回報位置申請週期性位置 Update 移除週期性位置 Update 10

程式碼解說 public void requestlocationupdates(string provider, long mintime, float mindistance,

位置更新的最短距離 ( 單位 : 公尺 ) listener: 用來負責傾聽處理位置變化的訊息 public void removeupdates(locationlistener

public void onlocationchanged(location location) { Called when the location has changed.

user. public void onproviderenabled(string provider) { Called when the provider is enabled by

6 程式碼解說 public void requestlocationupdates(string provider, long mintime, float mindistance, LocationListener listener); 申請週期性的提供位置資訊 provider: 位置提供者 mintime: 位置更新的最短間隔時間 mindistance: 位置更新的最短距離 ( 單位 : 公尺 ) listener: 用來負責傾聽處理位置變化的訊息 public void removeupdates(locationlistener listener); 移除週期性的提供位置資訊 11 Location Listener Listener 的實體用來負責傾聽處理位置變化的訊息 Listener 的四個必要函式 public void onlocationchanged(location location) { Called when the location has changed. public void onproviderdisabled(string provider) { Called when the provider is disabled by the user. public void onproviderenabled(string provider) { Called when the provider is enabled by the user. public void onstatuschanged(string g provider, int status, Bundle extras) { Called when the provider status changes. 12

7 練習 1 - 取得目前位置經緯度 (1/2) Manifest 檔將一列程式碼貼到 AndroidManifest.xml 檔 <?xml version="1.0" encoding="utf 8"?> <manifest xmlns:android=" package="com.demo.android.googlemap" " d d l " android:versioncode="1" android:versionname="1.0"> <application android:icon="@drawable/icon" android:label="@string/app_name"> <activity android:name=".googlemap" android:label="@string/app_name"> <intent filter> <action android:name="android.intent.action.main" /> <category android:name="android.intent.category.launcher" /> </intent filter> </activity> </application> <uses permission android:name="android.permission.access_fine_location"> </uses permission> <uses permission android:name="android.permission.access_coarse_location"> </uses permission> </manifest> 13 練習 1 - 取得目前位置經緯度 (2/2) Java Code private LocationManager mgr; private String best; public void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.main); mgr = (LocationManager)getSystemService(LOCATION_SERVICE); Criteria criteria = new Criteria(); best = mgr.getbestprovider(criteria, g true); Location location = mgr.getlastknownlocation(locationmanager.gps_provider); if (best!= null) { location = mgr.getlastknownlocation(best); Toast.makeText(this, "Latitude : " + location.getlatitude() + ", Longitude : " + location.getlongitude(), Toast.LENGTH_LONG).show(); protected void onresume(){ mgr.requestlocationupdates("gps", 2000, 1, locationlistener); super.onresume(); protected void onstop(){ mgr.removeupdates(locationlistener); super.onstop(); private final LocationListener locationlistener = new LocationListener() { public void onlocationchanged(location location) { // TODO Auto-generated method stub Toast.makeText(GoogleMap.this, "Latitude : " + location.getlatitude() + ", Longitude : " + location.getlongitude(), Toast.LENGTH_LONG).show(); //loc.settext("latitude : " + location.getlatitude() + ", Longitude : " + location.getlongitude()); ; public void onproviderdisabled(string provider) { // TODO Auto-generated method stub public void onproviderenabled(string provider) { // TODO Auto-generated method stub public void onstatuschanged(string provider, int status, Bundle extras) { // TODO Auto-generated method stub 14

8 程式技巧 : 建立 Google Maps 申請 Google Maps 開發金鑰於 androidmanifest.xml 註冊服務 /res/layout/main.xml 的撰寫地圖程式碼的撰寫建立 Google Map 15 STEP 1: 取得 Keystore 位置開發的金鑰與 import 到機器的金鑰不同產生認證指紋 <MD5> eclipse 點選 Windows->Preferences, 取得 keystore 位置打開 cmd 進到 keystore 的目錄底下 16

9 STEP 2: 產生認證指紋 MD5 在 cmd 中, 進入到放置 key 的目錄底下執行 :keytool -list -keystore debug.keystore 輸入密碼 :android, 以取得 MD5 若發生 keytool 不是內部或外部指令時, 請按照下張投影片所述, 請進到 keytool 目錄底下執行 17 發生 Keytool 不是內部或外部命令時進到 keytool 所在的目錄 ( 通常在 Java 的目錄底下 ), 執行 : keytool list keystore C:\Users\ 使用者名稱 \.android\debug.keystore 18

10 STEP 3: 申請 Google Map 開發金鑰使用 Browser 連線在網頁中輸入剛剛取得的 MD5, 選項勾選完在點選 Generate API Key 19 STEP 4: 取得 Android Maps API Key 20

11 於 androidmanifest.xml 註冊服務打開 androidmanifest.xml, 加入下二行 : 使用 google map library(application tag 內加入 ) 允許程式可以連結到 internet 21 /res/layout/main.xml 的撰寫於 main.xml 中 layout 內加入此行, 放置 Google Map 的位置其中 0T_6-yJ7B0oMii0kyiLxe5_y2zUjQwKemdcHPUg 為剛剛申請的 API key android:clickable= true 代表設定 Map 可拖曳 22

12 地圖程式碼 : 宣告及設定 import data extends Mapactivity 宣告 Map variable 設定 Map 23 地圖程式碼 :MapActivity Mapactivity 必要實作此函式 eclipse 可以點選 implement 此函式 24

13 程式碼解說 (1/2) public class test extends MapActivity 繼承 MapActivity, 當中其實作一些顯示 MapView 的必要程式碼 map = (MapView)findViewById(R.id.map); ( p); 讓變數 map 取得 MapView 位置, 也就是在 main.xml 中設定的位置 mc = map.getcontroller(); 取得這個 MapView 的 MapController 物件 mc.setzoom(int zoomlevel); 1<=zoomLevel<=21, 愈接近 1 顯示的區域愈大, 資料愈粗略 ; 反之, 則相反 25 程式碼解說 (2/2) map.setsatellite(true); 是否顯示衛星影像 map.setbuiltinzoomcontrols(true); 是否內建 zoom control MapController.animateTo(GeoPoint animateto(geopoint point) 設定 map 的中心位置 GeoPoint(int latitudee6, int longitudee6) 設定坐標點, 其經緯度為 integer 型態, 大小為一般的經緯度 *

14 練習 2 - 建立 Google Maps (1/2) Manifest 及 main.xml Manifest 的撰寫 main.xml 的撰寫 <?xml version="1.0" encoding="utf-8"?> <manifest xmlns:android=" package="com.demo.android.googlemap" android:versioncode="1" android:versionname="1.0"> <application android:icon="@drawable/icon" android:label="@string/app_name"> <uses-library android:name = "com.google.android.maps"/> <activity android:name=".googlemap" android:label="@string/app_name"> <intent-filter> <action android:name="android.intent.action.main" /> <category android:name="android.intent.category.launcher" /> </intent-filter> </activity> </application> <uses-permission android:name="android.permission.internet"> </uses-permission> <uses-permission android:name="android.permission.access_fine_location"> </uses-permission> <uses-permission android:name="android.permission.access_coarse_location"> </uses-permission> </manifest> <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android=" android:layout_width="fill_parent" android:layout_height="fill_parent" > <com.google.android.maps.mapview android:id="@+id/map" android:layout_width="fill_parent" android:layout_height="fill_parent" android:apikey="0t_6-yj7b0onorqxrue_e6kc3dmutw0raaoseng" android:clickable="true" /> <LinearLayout android:id="@+id/zoom" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignparentbottom="true" android:layout_centerhorizontal="true" /> <TextView android:id="@+id/loc" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="@string/hello" /> </RelativeLayout> 27 練習 2 - 建立 Google Maps (2/2) Java Code public class GoogleMap extends MapActivity{ : private MapView map; private MapController mc; private LocationManager mgr; private String best; : //create Google Maps private void showmaps() { map = (MapView)findViewById(R.id.map); ( ) mc = map.getcontroller(); mc.setzoom(19); Criteria criteria = new Criteria(); best = mgr.getbestprovider(criteria, true); Location location = mgr.getlastknownlocation(locationmanager.gps_provider); if (best!= null) { location = mgr.getlastknownlocation(best); if (location!= null) { mc.animateto(new GeoPoint((int)(location.getLatitude()* ), (int)(location.getlongitude()* ))); else { mc.animateto(new GeoPoint((int)( * ), (int)( * ))); map.setsatellite(true); map.setbuiltinzoomcontrols(true); 28

15 程式技巧 : 標示目前位置在 Google Maps 上自動定位自己的位置, 且顯示出自定的位置圖片申請週期性位置服務 MyLocationOverlayer 的使用圖層的取得及使用取得新位置時的反應定位圖示定位到自己位置顯示腳印圖片 29 申請週期性位置服務變數宣告註冊位置 update 移除位置 update 30

16 MyLocationOverlayer 的使用取得 map 的圖層設定位置改變時的行為將圖層 mylayer 載入到 map 上 31 圖層的取得及使用 List<Overlay> overlays; 宣告一個 list 物件, 裡面用來放置圖層 overlays = map.getoverlays(); 取得目前 map 的圖層 mylayer = new MyLocationOverlayer(this, map); 宣告一個圖層物件 overlays.add(mylayer); 將剛剛宣告的圖層物件載入至 map 上 32

17 新位置事件處理程序 mylayer.runonfirstfix( new Runnable() { public void run() { mc.animateto(mylayer.getmylocation()); ); 其參數為一 Runnable 物件, 當位置改變時, 系統會自動產生一個 thread 去此 Runnable 物件的內容 33 預設的定位圖示將 mylocationoverlayer class 繼承 MyLocationOverlay class MyLocationOverlay class 內有 drawmylocation 函式, 可用來繪製 mylocation 的圖形預設的圖示 : 34

18 自定定位圖示 Override 繼承到的 MyLocationOverlay class 內 drawmylocation 函式預設定位圖示自定定位圖示 35 顯示位置的程式碼 extends MylocationOverlay Draw mylocation 36

19 使用 Drawable 類別 Drawable drawable; 宣告一個 drawable 物件, 此類別可用來設定及存放繪製的圖形, 將圖形繪製到 Canvas( 畫布 ) 上 drawable = mapview.getcontext().getresources().getdraw g g able(r.drawable.north1); 取得要繪製的圖形 width = drawable.getintrinsicwidth(); 取得圖形的寬度 37 將目前位置投影到手機螢幕的地圖上 height = drawable.getintrinsicheight(); 取得圖形高度 Point center = new point(); 宣告一 point 物件, 其用來存放螢幕的像素座標 Projection projection = mapview.getprojection(); 取得目前地圖座標投影到螢幕的投影 projection.topixels(myloc, center); 將目前位置 myloc 投影到 center 上 38

20 Canvas( 畫布 ) 及 Drawable 圖形邊界設定 Canvas canvas 為一畫布物件 canvas.rotate(lastfix.getbearing(), center.x, center.y); 旋轉目前的畫布,lastFix 為目前位置的前一個位置旋轉角度由 gps 的 bearing 提供 drawable.setbounds(center.x - width / 2, center.y - height / 2, center.x + width / 2, center.y + height / 2); 設定邊界 39 將圖示繪製到 Canvas 上 drawable.draw(canvas); 將圖形繪製到畫布上修改完成後, 顯示位置中心便會更改成我們要的圖形 40

21 練習 3 - 標示目前位置 Java code private MyLocationOverlayer mylayer; private List<Overlay> overlays; //////////////////////////////////////////////////////////////////////////////////////////// public class MyLocationOverlayer extends MyLocationOverlay { private Drawable drawable; private Point center; private int width; private int height; private int counter = protected void onresume(){ mylayer.enablemylocation(); super.onresume(); public MyLocationOverlayer(Context context, MapView mapview) { super(context, protected void onstop(){ mylayer.disablemylocation(); super.onstop(); protected void drawmylocation(canvas canvas, MapView mapview, Location lastfix, GeoPoint myloc, long when) { if (counter++ %2 == 0) drawable = mapview.getcontext().getresources().getdrawable(r.drawable.north1); else drawable = mapview.getcontext().getresources().getdrawable(r.drawable.north2); width = drawable.getintrinsicwidth(); private void localbaseservice() { overlays = map.getoverlays(); mylayer = new MyLocationOverlayer(this, map); mylayer.runonfirstfix( height = drawable.getintrinsicheight(); new Runnable() { public void run() { mc.animateto(mylayer.getmylocation()); ); overlays.add(mylayer); add(mylayer); center = new Point(); Projection projection = mapview.getprojection(); projection.topixels(myloc, center); //emulator 不提供 getbearing(), 但實機上會提供 canvas.rotate(lastfix.getbearing(), center.x, center.y); drawable.setbounds(center.x - width / 2, center.y - height / 2, center.x + width / 2, center.y + height / 2); drawable.draw(canvas); canvas.rotate(-lastfix.getbearing(), center.x, center.y); 41 程式技巧 :Marker 的使用 Maker 的主要功能在於. 在 map 上秀出 Marker 點選下去產生反應 42

22 MarkerOverlay 類別的使用宣告 MarkerOverlay 物件傳入一 Drawable 物件與 Context 物件當作 contructor 參數將 MarkerOverlay 載入到 Map 43 MarkerOverlay 類別的撰寫 44

23 繼承 ItemizedOverlay extends ItemizedOverlay 其需要一個 OverlayItem 的串列宣告一個 ArrayList 類別產生這個動態串列 BoundCenterBottom 用來調整 Drawable 物件的邊界清空 list 增加 item 到 list 裡,OverlayItem constructor 需要三個參數 1. 景點位置的 GeoPoint;2. 景點標題 ;3. 3 景點的片段說明 45 建立景點圖示及點選時的反應執行 populate(), 其會呼叫 createitem(), 如此才能真正建立景點圖示用來處理當景點被按下時產生的反應 46

24 練習 4 - Marker 的使用 Java Code private MarkerOverlay markeroverlay; private List<Overlay> overlays; class MarkerOverlay extends ItemizedOverlay<OverlayItem> { Context mctx; //////////////////////////////////////////////////////////////////////////////////////////////////////////////////// private List<OverlayItem> items = new ArrayList<OverlayItem>(); private void localbaseservice() public MarkerOverlay(Drawable defaultmarker,context mctx) { { super(boundcenterbottom(defaultmarker)); Drawable drawable; this.mctx = mctx; drawable = getresources().getdrawable(r.drawable.location); items.clear(); markeroverlay = new MarkerOverlay(drawable,this); items.add(new OverlayItem(new overlays.add(markeroverlay); GeoPoint((int)( *1E6),(int)( *1E6)), "POINT 1", null)); protected OverlayItem createitem(int i) { return public int size() { return protected boolean ontap(int pindex) { Toast.makeText(mCtx, "Here is " + items.get(pindex).gettitle(), Toast.LENGTH_SHORT).show(); return true; 47 程式技巧 : 畫直線在 Map 上繪製一條線 MyOverlay 類別的宣告及使用繼承 Overlay 類別 Paint 類別的使用 48

25 MyOverlay 類別的宣告及使用宣告 MyOverlay 物件執行其 constructor 並載入到 Map 上 MyOverlay 類別 49 繼承 Overlay 類別 Extends Overlay 類別 Override draw method 50

26 Paint 類別的使用宣告 Paint 物件此類別用來設定畫筆的參數設定畫筆的參數 setcolor: 設定顏色 setstrokewidth: 設定筆畫寬度 setalpha: 設定顏色的深淺在 canvas 上畫線, 從點 1 到點 2 參數 1 2 為點 1 的 x,y 像素值, 參數 2,3 為點 2 的 x,y 像素值, 參數 5 為使用的畫筆 51 練習 5 - 畫直線 Java Code private List<Overlay> overlays; private MyOverlay line; private Location point1, point2; /////////////////////////////////////////////////////////////////////////////////////////////////// overlays = map.getoverlays(); line = new MyOverlay(point1, point2); overlays.add(line); class MyOverlay extends Overlay{ private Paint mpaint; private Location mylocation, point1, point2; public MyOverlay(Location point1, Location point2){ this.point1 = new Location(point1); this.point2 = new public void draw(canvas canvas, MapView mapv, boolean shadow) { Projection projection = mapv.getprojection(); mpaint = new Paint(); mpaint.setcolor(color.red); mpaint.setstrokewidth(5); mpaint.setalpha(120); Point p1 = new Point(); Point p2 = new Point(); projection.topixels(new GeoPoint((int)(point1.getLatitude()*1E6), 1E6), (int)(point1.getlongitude()*1e6)), p1); projection.topixels(new GeoPoint((int)(point2.getLatitude()*1E6), (int)(point2.getlongitude()*1e6)), p2); canvas.drawline(p1.x, p1.y, p2.x,p2.y, mpaint); // end draw // end class 52

多媒體應用 13 新增專案並完成版面配置 <ExMusic01> <activity_main.xml> ImageView ID imgplay ImageView ID imgstop ImageView ID imgfront TextView ID txtsong TextView ID t

多媒體應用 13 新增專案並完成版面配置 <ExMusic01> <activity_main.xml> ImageView ID imgplay ImageView ID imgstop ImageView ID imgfront TextView ID txtsong TextView ID t 設定存取 SD 卡的權限 SD SD 13.1.4