Microsoft PowerPoint - Lab 3-1 Vehicular Navigation Systems.ppt [相容模式]

Transcription

1 車輛定位與電子地圖整合服務 Android idprogramming Environment Nt Network koti Optimization i Lab Lb Department of Computer Science National Chiao Tung University 1 Project Objective 主要畫面設計 顯示 Google Maps 次要畫面設計 Outline 顯示輸入起 終點畫面 查看線上資料 取得繞境資料 繞境顯示於 Google Maps 2

2 Project Objective 在手機上開發車輛導航系統 在 Google Maps 劃出路徑規畫 提供目前位置服務, 並可將目前位置設定為起點或終點 3 程式架構 使用者可按 Menu-Route 進入輸入畫面 再輸入畫面輸入起點以及終點 點 Search 按鈕可在 Google Maps 上顯示繞境 4

3 程式執行流程 5 新增專案 取得使用地圖權限 顯示 Google Maps 編輯 AndroidManifest.xml Layout 畫面格式設定 編輯 main.xml 建立 main class vnspart1.java 建立 MapLayout Class MapLayout.java 在 main class 將 MapLayout 初始化 6

4 取得使用地圖權限 編輯 AndroidManifest.xml Google Maps 選擇性的 API, 若我們要使用他則必須在 application 標籤中宣告 <application </activity> <uses-library android:name="com.google.android.maps" /> </application> Google Maps 必須連接上網路才能取得資料, 因此必須在宣告 Intenet 的使用權限 <manifest </application> <uses-sdk android:minsdkversion= 8" /> <uses-permission android:name="android.permission.internet" /> </manifest> 7 Layout 畫面格式設定 編輯 main.xml 將 Layout 更改為 FrameLayout 格式 在 FrameLayout 中的所有物件皆會放置在畫面左上角 將 MapLayout 放置在 FrameLayout 中 此 MapLayout class 未來將會放置 Google Maps <FrameLayout xmlns:android=" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent" > <com.demo.vns.vnspart1.maplayout android:id="@+id/map_layout" android:layout_width="fill_parent" android:layout_height="fill_parent" /> </FrameLayout> 8

5 建立 Main Activity Class(1) Import Head File import android.os.bundle; import android.view.menu; import android.view.menuinflater; import com.google.android.maps.mapactivity; import com.google.android.maps.mapview; extends MapActivity 此 Activity 是 Google Maps 畫面, 所以我們必須繼承 MapActivity public class Vnspart1 extends MapActivity { 9 建立 Main Activity Class(2) 宣告 MapView 物件 用來處理地圖資訊 private MapView mapview; 建立 Menu 使用者可以點選 Menu 來選擇動作 (Route or Quit) protected static final int MENU_SEARCH = Menu.FIRST; protected static final lint MENU_QUIT = public boolean oncreateoptionsmenu(menu menu){ super.oncreateoptionsmenu(menu); menu.add(0, MENU_SEARCH, 0, Route"); menu.add(0, MENU_QUIT, 0, Quit ); return true; 10

6 建立 Menu 在 res 底下建立一資料夾 menu 在 menu 資料夾底下新增.xml 檔 menu.xml 在 menu.xml 檔中加入 <item /> <item /> 在 main class 加入下面 Code, 建立 public boolean oncreateoptionsmenu(menu ti menu) ){ MenuInflater inflater = getmenuinflater(); inflater.inflate(r.menu.menu, menu); return true; 11 建立 MapLayout Activity Class(1) Import Data import com.google.android.maps.mapview; import android.content.context; import android.util.attributeset; import android.widget.linearlayout; extends LinearLayout 此 class 是用來顯示地圖畫面, 因此必須繼承 LinearLayout public class MapLayout extends LinearLayout { 12

7 建立 MapLayout Class(2) 宣告 MapView 物件 用來設定地圖資訊 private MapView mapview; 必須建立下列函式, 並呼叫 init() it() 設定地圖 public MapLayout(Context context, AttributeSet attrs) { super(context, attrs); init(); public MapLayout(Context context) { super(context); init(); 13 建立 MapLayout Activity Class(3) 建立 init() 函式 用來式定地圖資訊 private void init() { 加入 setorientation(), 設定地圖方向, 水平或垂 直 setorientation(vertical); 14

8 建立 MapLayout Activity Class(4) LinearLayout 參數設定 setlayoutparams( new LinearLayout.LayoutParams(android.view.ViewGroup.LayoutParams.FILL y y _ PARENT, android.view.viewgroup.layoutparams.fill_parent)); 設定金鑰 this.mapview = new MapView(getContext(), MAP KEY"); mapview 的基本設定 mapview.setenabled(true); mapview.setclickable(true); 加入 mapview 至 LayOut 上 addview(mapview); 15 建立 MapLayout Activity Class(5) 建立 getmaplayout 方法 使其他 Class 可使透過此方法取得 Google Maps public MapView getmaplayout() { return mapview; 16

9 在 main class 將 MapLayout 初始化 加入宣告 MapLayout 物件 private MapLayout maplayout; 建立 initmap() 用來初始化地圖 private void initmap() { 17 在 main class 將 MapLayout 初始化 (2) 在 initmap() 加入 取得 MapLayout 實體物件 maplayout = (MapLayout)findViewById(R.id.map_layout); 利用 getmaplayout 取得地圖 mapview = maplayout.getmaplayout(); 設定地圖為可以觸控移動 mapview.setbuiltinzoomcontrols(true); 在 oncreate 中加入 public void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.main); initmap(); 18

10 實驗結果 19 練習時間 20

11 建立輸入畫面 在 AndroidManifesr.xml 檔新增 search activity 建立 search.xml 建立 Search.java 修改 main.xml 檔 在地圖上輸出起點以及終點文字 顯示目前位置 設定 Menu 動作 21 輸入畫面設計 輸入方塊 提示文字 按鈕 22

12 建立 search.xml 顯示提示文字 顯示輸入方塊 <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" />; <EditText android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="" /> <Button 顯示按鈕 再 string.xml 檔 加入文字 android:layout_width="wrap_content" android:layout_height="wrap_content" /> <string name="start_point">start point</string> <string name="end_point">end point</string> <string name="search search_button button">query</string> <string name="cancel_button">cancel</string> 23 設定 Menu 動作 設定 Menu Route, 當點下 Route 後會跳至 Search Activity 注意 switch case public boolean onoptionsitemselected(menuitem item){ switch(item.getitemid()){ case R.id.Route : Intent intent = new Intent(); intent.setclass(vnspart2.this, Search.class); startactivityforresult(intent, ACTIVITY_ROUTE); break; case R.id.Quit Q : finish(); break; return super.onoptionsitemselected(item); p 24

13 Import Head File import android.app.activity; import android.content.intent; import android.content.pm.activityinfo; import android.os.bundle; import android.view.view; import android.widget.button; import android.widget.edittext; 建立 Search.java(1) 宣告輸入方塊及按鈕 private EditText srctext; private EditText desttext; private Button buttonsearch; private Button buttonreturn; 25 畫面設定 setcontentview(r.layout.search); 設定畫面顯示方向 建立 Search.java(2) setrequestedorientation(activityinfo.screen _ ORIENTATION_ PORTRAIT); 宣告輸入方塊 方塊初始文字 srctext =(EditText)findViewById(R.id.editTextStart); t)fi dvi Id(Rid tst t) srctext.settext(" 新竹交通大學 "); desttext=(edittext)findviewbyid(r.id.edittextend); desttext.settext(" 新竹清華大學 "); 26

14 建立 Search.java(3) 宣告按鈕 按鈕文字設定 buttonsearch=(button)findviewbyid(r.id.buttonsearch); B Id(Ridb S h) buttonsearch.settext(r.string.search_button); 設定 Search 按鈕動作 設置 OnClickListener buttonsearch.setonclicklistener(new Button.OnClickListener() { ); 27 建立 Search.java(4) 在 OnClickListener 中加入下列 Code 宣告 Intent 以及 Bundle 將起點以及終點資料利用 putextras() 利用 sertresult() 將資料回傳前個 Activity, 並設置參數為 public void onclick(view v){ Intent i=new Intent(); Bundle b=new Bundle(); b.putstring("src", srctext.gettext().tostring()); b.putstring( putstring("dest", desttext.gettext().tostring()); tostring()); i.putextras(b); setresult(result_ok, i); finish(); 28

15 建立 Search.java(3) 設置 cancel 按鈕動作 buttonreturn=(button)findviewbyid(r.id.buttoncancel); buttonreturn.settext(r.string.cancel _ button); buttonreturn.setonclicklistener(new Button.OnClickListener() { ); 當按下按鈕時利用 setresult(), 設置回傳參數 public void onclick(view v) { setresult(result_canceled ); finish(); 29 修改 main.xml 檔 在 main.xml 檔內插入 TextView 用來顯示 Search Activity 回傳之起點及終點 <LinearLayout android:id="@+id/zoom" android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="vertical" i ti " ti > <TextView android:id="@+id/start" android:layout_width="fill_parent" android:layout_height="wrap_content" i ht " t t" android:textcolor="#ff0000" android:textstyle="italic" android:padding="20px" android:text="start" t "t t" /> </LinearLayout> 30

16 修改 main.java 接收 Activity 資料 再 main.java 加入下面 code, 接收 Search Activity protected void onactivityresult(int requestcode, int resultcode, Intent data){ if(requestcode==activity ACTIVITY_ROUTE){ if(resultcode==result_ok){ Bundle boude = data.getextras(); view_start.settext(boude.getstring("src")); view_end.settext(boude.getstring( end getstring("dest")); if(resultcode==result_canceled){ //do nothing 31 onactivityresult() 說明 用來接收 Activity 回傳資料 參數說明 requestcode: 辨識是哪個 Activity 回傳資料 resultcode: lc 辨識 Activity i 回傳的型態 Data: 儲存上個 Activity 所回傳的資料 32

17 顯示 MyLocation 新增 Class-MyOverlayer, 此 Class 繼承 MyLocationOverlay y public class MyOverlayer extends MyLocationOverlay { Override protected void drawmylocation(canvas canvas, MapView mapview, Location lastfix, GeoPoint myloc, long when) { 33 顯示 MyLocation 在 drawmylocation 中加入以下判斷式 (lastfix.hasspeed() && lastfix.getspeed() > 1) 判斷是否移動 if (lastfix.hasspeed() && lastfix.getspeed() > 1) {... else { 沒有移動執行下面程式碼 表示只顯示目前位置, 顯示 Google 內建 icon super.drawmylocation(canvas, mapview, lastfix, myloc, when); 34

18 顯示 MyLocation if(lastfix.hasspeed() && lastfix.getspeed() > 1) 若有移動則執行下段程式碼 若無 drawable 物件, 則宣告 drawable 物件, 取得其高度及寬度並新增 Point if (drawable == null) { drawable = mapview.getcontext().getresources().getdrawable(r.drawable.direction_arrow); accuracypaint = new Paint(); width = drawable.getintrinsicwidth(); i height = drawable.getintrinsicheight(); center = new Point(); 將目前位置投影至地圖上 將目前位置投影至地圖上 旋轉目前畫布,lastFix 為上一個位置, 旋轉角度為 GPS bearing 提供 設定 drawable 物件邊界 將圖形畫置畫布上 Projection projection = mapview.getprojection(); projection.topixels(myloc, center); 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); super.drawmylocation(canvas, mapview, lastfix, myloc, when); 35 Override MyLocation 程式 if (lastfix.hasspeed() && lastfix.getspeed() > 1) { if (drawable == null) { drawable = mapview.getcontext().getresources().getdrawable(r.drawable.direction_arrow); accuracypaint = new Paint(); width = drawable.getintrinsicwidth(); height = drawable.getintrinsicheight(); center = new Point(); Projection projection = mapview.getprojection(); projection.topixels(myloc, topixels(myloc center); 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); else { drawable.draw(canvas); superdrawmylocation(canvas super.drawmylocation(canvas, mapview, lastfix, myloc, when); super.drawmylocation(canvas, mapview, lastfix, myloc, when); 36

19 顯示 MyLocation 初始化 GPS provider private void initlocationmanager() { locationlistener = new LocationListener(){ public void onlocationchanged(location location) { // TODO Auto-generated method stub locationupdated(location); 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 ; locationmanager = (LocationManager) getsystemservice(context.location_service); locationprovider = LocationManager.GPS_PROVIDER; locationmanager.requestlocationupdates(locationprovider, 0, 0, locationlistener); 37 在地圖上顯示自己位置 加入函式如下 新增物件實體 MyOverler 在 mapview 上加入 myoverlay 物件 private void initmylocation() { myoverlayer = new MyOverlayer(this, mapview); mapview.getoverlays().add(myoverlayer); myoverlayer.enablemylocation(); myoverlayer.runonfirstfix(new i Runnable(){ public void run(){ GeoPoint g = myoverlayer.getmylocation(); mapview.settraffic(true); mapview.getcontroller().setzoom(15); (1 ) mapview.getcontroller().setcenter(g); ); 38

20 實驗結果 39 練習時間 40

21 車輛定位與電子地圖整合服務 Android idprogramming Environment Nt Network koti Optimization i Lab Lb Department of Computer Science National Chiao Tung University 41 OUTLINE 改寫 onactivityresult() MapPoint Class 建立 地名轉經緯度 -Route-getGeoByAddress 取得路徑資料 - Route-findRoute 在地圖上畫上路徑 -MapOverlay-draw 建立當觸碰到路徑上 Pit Point 之方框及事件 MapOverlay-onTap MapOverlay-draw MapOverlay-getHitMapPoint 42

22 改寫 vns Acrivity 中 onactivityresult() 自 Search Acivity 中取得起點以及終點地址, 呼叫 getgeobyaddress() 將地址轉經緯度 利用 findroute protected void onactivityresult(int requestcode, int resultcode, Intent data){ if(requestcode==activity_route){ if(resultcode==result_ok){ Bundle b = data.getextras(); Toast toast = Toast.makeText(Vns.this,b.getString("src")+b.getString("dest"), kt h b S (" ") b S ("d ") Toast.LENGTH_SHORT); toast.show(); GeoPoint srcgp = route.getgeobyaddress(b.getstring("src")); GeoPoint destgp = route.getgeobyaddress(b.getstring("dest")); route.findroute(srcgp, destgp, Color.BLUE, mapview); if(resultcode==result_canceled){ //do nothing 43 建構路徑上 Point 之 Class 路徑上的 Point 我們加入下列中幾個成員 GeoPoint 用來辨認 Point 的經緯度 Type 用來便是此點的型態 Event 儲存此 Point 的事件描述 由以上幾點可建構出下面的 Class public class MapPoint { private GeoPointpoint; private int type; private String event; public MapPoint(int type, String event,double latitude, double longitude) { this.type = type; this.event = event; point = new GeoPoint((int)(latitude*1e6),(int)(longitude*1e6)); 44

23 建構路徑上 Point 之 Class 建立下列幾個方法以便未來取得 MapPoint 上資料 getpoint() 取得此 Point 的經緯度 getevent() 取得此 Point 的事件描述 gettype() 取得此 Point 的型態 public GeoPoint getpoint() { return point; public String getevent() { return event; public int gettype() { return type; 45 地名轉經緯度 使用者輸入為地址資料 Google Maps 認知為經緯度資料 必須將地址轉換成經緯度 Google 提供 API Geocoder 利用 Geocoder 將地址轉換成經緯度 在 Route Class 中加入 getgeobyaddress() findroute() 46

24 地名轉經緯度 - Geocoder Class 介紹 新增一個 Geocoder 物件 vns 為呼叫新增此物件之 Activity Locale.getDefault() 為查詢時所指定的區域 可使用 getdefault() 默認區域, 或者指定地區 Geocoder mgeocoder = new Geocoder(vns, Locale.getDefault()); 47 地名轉經緯度 - 利用 Geocoder 轉換地址 利用 Geocoder 中 getfromlocationname() 方法取得轉換後資料 strsearchaddress 為輸入地址資料 1 表示回傳的資料個數 List<Address> lstaddress = mgeocoder.getfromlocationname(strsearchaddress, 1); 48

25 地名轉經緯度 - 取得經緯度 宣告 Address Class 取得 Geocoder 轉換後 List 中第 0 筆資料 利用 Address Class 中,getLatitude() 及 getlongitude() 方法取得經緯度 將取得之經緯度加入新增之 GeoPoint 中 Address adslocation = lstaddress.get(0); double geolatitude = adslocation.getlatitude()*1e6; double geolongitude = adslocation.getlongitude()*1e6; gp = new GeoPoint((int) geolatitude, (int) geolongitude); 49 Input 為一段地址 地址轉經緯度 Code Reture 一個 GeoPoint ( 內含地址之經緯度 ) 加入至 Route Class 中 public GeoPoint getgeobyaddress(string strsearchaddress){ GeoPoint gp = null; Geocoder mgeocoder = new Geocoder(vns, Locale.getDefault()); List<Address> lstaddress = mgeocoder.getfromlocationname(strsearchaddress, 1); if (!lstaddress.isempty()){ Address adslocation = lstaddress.get(0); double geolatitude = adslocation.getlatitude()*1e6; double geolongitude = adslocation.getlongitude()*1e6; gp = new GeoPoint((int) geolatitude, (int) geolongitude); return gp; 50

26 取得起點至終點路徑 手機 Google Maps 必無內建找尋路徑功能 必須利用網路上 Google Maps 路徑找尋功能 利用 URL 連上網路 取得回傳 KML 檔 自 KML 檔中取得路徑資料 51 取得起點至終點路徑 - 利用 URL 新增一 String 用來儲存網址 仿照下圖中 urlstring.append() 依序將往只填入 String 中 下圖紅色框線, 上者為起點 下者為終點 StringBuilder urlstring = new StringBuilder(); urlstring.append(" google urlstring.append("&saddr="); urlstring.append( Double.toString((double)src.getLatitudeE6()/1.0E6 )); urlstring.append(","); urlstring.append( Double.toString((double)src.getLongitudeE6()/1.0E6 )); urlstring.append("&daddr="); urlstring.append( Double.toString((double)dest.getLatitudeE6()/1.0E6 )); urlstring.append(","); urlstring.append( Double.toString((double)dest.getLongitudeE6()/1.0E6 )); urlstring.append("&ie=utf8&0&om=0&output=kml"); p 52

27 練習 1 練習時間 在 onavtivityresult() 中將轉換後的經緯度顯示出來 練習 2 下圖中網址輸入經緯度後, 利用瀏覽器取得 KML 檔 交大 : 緯度 = , 經度 = 清大 : 緯度 = , 經度 = 緯度, 經度 &daddr= 緯度, 經度 &ie=utf8&0&om=0&output=kml 53 宣告 取得起點至終點路徑 - 宣告 Document 用來處存 URL 回傳的 KML 檔 HttpURLConnection 用來與 Internet 連接 URL 用來儲存 URL 網址 Document doc = null; HttpURLConnection urlconnection= null; URL url = null; 54

28 取得起點至終點路徑 - Connect Internet & Get KML File 新增一 URL 並將網址存入 URL 中 設定 urlconnerction 並與 Internet 連線 將回傳的 KML 檔存入 doc 中 url = new URL(urlString.toString()); tostring()); urlconnection=(httpurlconnection)url.openconnection(); urlconnection.setrequestmethod("get"); urlconnection.setdooutput(true); urlconnection.setdoinput(true); urlconnection.connect(); t() DocumentBuilderFactory dbf = DocumentBuilderFactory.newInstance(); DocumentBuilder db = dbf.newdocumentbuilder(); doc = db.parse(urlconnection.getinputstream()); 55 取得起點至終點路徑 - 網址 &.kml 檔中所需內容 完整 URL 網址 p g p, &om=0&output=kml 回傳 KML 檔中的路徑資料 <GeometryCollection> <LineString> <coordinates> , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , </coordinates> </LineString> </GeometryCollection> 56

29 取得起點至終點路徑 - 自 KML 檔中取得經緯度 取得經緯度字串, 可利用下列方式 getelementbytagname g 表示取得特定的 Tag Item() 表示取得 KML 中第幾個特定的 Tag getfirstchild() 表示取得下一層 Tag, 但若第一次呼叫則回傳的是自己 getnodevalue() 取得 Tag 中的資料 String path=doc.getelementsbytagname("geometrycollection").item(0).getfirstchild().getfirstchild().getfirstchild().getnodevalue() ; 57 取得起點至終點路徑 getelementsbytagname("geometrycollection").item(0).getfirstchild() getfirstchild() getfirstchild() getnodevalue() 58

30 取得起點至終點路徑 - 在 MapViewer 中加入方法 將經緯度加入至 List 中 第一個參數代表此點之型態 第二個參數為此點之事件描述 第三 第四為經緯度值第四為經緯度值 routepath 為所宣告知 List private List<MapPoint> routepath; public void addroutepath(int type, String eventdescriptor, double lat, double lng) { routepath.add(new MapPoint(type,eventDescriptor, lat, lng)); 59 取得起點至終點路徑 - 在 MapViewer 中加入方法 取得儲存此路徑上之點的 List public List<MapPoint> i getroutepath() { return routepath; 將儲存路徑上點之 List 中資料清空 public void clearroutepath() { routepath.clear(); 60

31 取得起點至終點路徑 - 加入至 routepath 中 將一連串的經緯度資料 (Path) 拆開 利用 addroutepath() 將拆開的經緯度資料放入 routepath 中 未來畫路徑將依據 routepath 中資料 String [] pairs = path.split(" "); for(int i=0;i<pairs.length;i++){ StringBuilder addstr = new StringBuilder(); lnglat = pairs[i].split(","); addstr.append(" 經度 :"); addstr.append(lnglat[1]); addstr.append(", 緯度 :"); addstr.append(lnglat[0]); mapoverlay.addroutepath(0, addstr.tostring(), Double.parseDouble(lngLat[1]), Double.parseDouble(lngLat[0])); 61 取得 KML 檔中的路徑指示 KML 檔中會有許多的 Placemark tag, 這些 Placemark tag 中會含有路徑的指示資料 可以在 Placemark tag 下的 name tag 中可以找到路徑指示 Placemark tag 中的 coordinates tag 也可以找到此指示的經緯度座標 62

32 取得 KML 檔中的路徑指示 路徑上的指示描述 此路徑描述的經緯度位置 63 取得 KML 檔中的路徑指示 可以利用之前取得路徑經緯度的方法來取得路徑指示描述 String length = doc.getelementsbytagname("name").item(k).getfirstchild().getnodevalue(); 取得此指示描述的經緯度 String lnglat = doc.getelementsbytagname("coordinates").item(k).getfirstchild().getnodevalue().split(","); 64

33 Draw Route In The Map 在 MapOverLay 修改 draw() 方法畫路徑 URL 回傳為多個經緯度值 儲存這多個經緯度值至 List 中 利用此 List 將點標至地圖上 將點與點之間連線 65 Draw Route In The Map - 畫出路徑 (1) 宣告一個 Projection 用來將地圖上之點投影至手機上 private Projection projection; projection = mapview.getprojection(); 宣告 Iterator 用來控制 List Iterator<MapPoint> iterator; iterator = mapviwer.getroutepath().iterator(); 66

34 Draw Route In The Map - 畫出路徑 (2) 設定 Paint 物件顏色, 未來畫圖時會根據設定的顏色 paint.setcolor(color.blue); 設定畫圖的範圍, 參數的設定表示畫圖位置及範圍相對於 p1 RectF oval1 = new RectF(p1.x - 10, p1.y - 10,p1.x + 10, p1.y + 10); 利用 drawoval() 畫上圓型在上述兩個設定參數 canvas.drawoval(oval1, paint); 67 Draw Route In The Map - 畫出路徑 (3) 當第一次讀取到此 List 時, 會先判斷 List 是否有資料 若 List 中有資料, 則新增一 Point(p1) 並取得第一筆資料 將第一筆資料利用 Projection 投影至手機地圖上, 並標上起點圖式 if (iterator.hasnexiteratort()) { MapPoint startpoint = iterator.next(); Point p1 = new Point(); projection.topixels(startpoint.getpoint(), p1); paint.setcolor(color.blue); RectF oval1 = new RectF(p1.x - 10, p1.y - 10,p1.x + 10, p1.y + 10); canvas.drawoval(oval1, l1 paint);. 68

35 Draw Route In The Map - 畫出路徑 (4) 繼續往下尋找下一筆資料 當此 List 還有資料, 則在新增一 Point(iP1), 再將所讀到下一筆資料投影至手機地圖上 將兩點做連線 while (iterator.hasnext()) { MapPoint ipoint = iterator.next(); Point ip1 = new Point(); projection.topixels(ipoint.getpoint(), ip1); paint.setcolor(color.blue); paint.setstrokewidth(5); paint.setalpha(250); canvas.drawline(p1.x, p1.y, ip1.x, ip1.y, paint);. 69 Draw Route In The Map - 畫出路徑 (5) 判斷 List 是否還有資料, 若無資料, 則將剛剛新增那一點標上結束圖式 若 List 還有資料, 則標上路徑中圖式並將第二個 Point (ip1)assign 至第一個 Point (p1) RectF oval2=new RectF(iP1.x - mradius,ip1.y - mradius,ip1.x + mradius,ip1.y + mradius); if (!iterator.hasnext()) { paint.setcolor(color.green); l paint.setalpha(255); canvas.drawoval(oval2, paint); else { paint.setcolor(color.black); paint.setalpha(255); canvas.drawoval(oval2, paint); p1 = ip1; 70

36 Draw Route In The Map 加入至 MapOverlay public boolean draw(canvas canvas, MapView mapview, boolean shadow, long when) { projection = mapview.getprojection(); if (shadow == false) { Iterator<MapPoint> iterator; iterator = mapviewer.getroutepath().iterator(); (); if (iterator.hasnext()) { MapPoint startpoint = iterator.next(); paint.setantialias(true); Point p1 = new Point(); projection.topixels(startpoint.getpoint(), p1); paint.setcolor(color.blue); RectF oval1 = new RectF(p1.x - mradius,,p1.y - mradius, p1.x + mradius, p1.y + mradius); canvas.drawoval(oval1, paint); while (iterator.hasnext()) { MapPoint ipoint = iterator.next(); Point ip1 = new Point(); projection.topixels(ipoint.getpoint(), ip1); paint.setcolor(color.gray); ) paint.setstrokewidth(5); paint.setalpha(120); canvas.drawline(p1.x, p1.y, ip1.x, ip1.y, paint); RectF oval2=new RectF(iP1.x - mradius,ip1.y - mradius,ip1.x + mradius,ip1.y + mradius); if (!iterator.hasnext()) { paint.setcolor(color.green); paint.setalpha(255); p canvas.drawoval(oval2, paint); else { paint.setcolor(color.black); paint.setalpha(255); canvas.drawoval(oval2, paint); p1 = ip1; return super.draw(canvas, mapview, shadow, when); 71 練習 練習時間 在地圖上畫出起點至終點路徑 72

37 路徑對話框設計 首先需要設計點道路徑上點時所跳出之對話框 當 Touch 道路徑上所標示的點, 則跳出對話框 73 路徑對話框設計 必須在 MapOverlay Class 中實作或修改下列方法 ontap() 方法, 當我們觸碰到螢幕時所發生的事件 draw() 方法, 畫出對話方框 新增 gethitmappoint(), i 用來確認觸碰的點是否在路徑上 74

38 路徑對話框設計 - 設計對話框 宣告一 Point, 儲存 Touch 銀幕上位置 selectedmappoint 表示觸碰在 Google Maps 上的 Point seldestinationoffset 表示在螢幕上的一 Point 將 selectedmappoint 投影在螢幕上的一 Point seldestinationoffset Point seldestinationoffset = new Point(); mapview.getprojection().topixels(selectedmappoint.getpoint(), seldestinationoffset); 75 路徑對話框設計 宣告對話框之長寬度, 並新增對話框 INFO_ WINDOW_ WIDTH 設定方框的寬度 INFO_WINDOW_HEIGHT 設定方框的高度 利用上述宣告的參數宣告一個方框 int INFO_WINDOW_WIDTH = 200; int INFO_WINDOW_HEIGHT = 20; RectF infowindowrect = new RectF(0,0,INFO_WINDOW_WIDTH,INFO_WINDOW_HEIGHT); 76

39 路徑對話框設計 宣告當 Touch 銀幕時, 設定對話框會在 Touch 螢幕上點的位置 int infowindowoffsetx = seldestinationoffset.x-info_window_width/2; int infowindowoffsety = seldestinationoffset.y-info_window_height-bubbleicon.getheight(); infowindowrect.offset(infowindowoffsetx,infowindowoffsety); 利用 canvas 將對話框畫在螢幕上 infowindowrect 為上面所設定之參數 2 3 個參數為設定方框左右的圓弧度 getinnerpaint 為額外自訂的 Paint 物件 canvas.drawroundrect(infowindowrect, 5, 5, getinnerpaint()); 77 路徑對話框設計 設定對話框中可加入文字位置 取出路徑上點中的事件 利用 canvas.drawtext() 將事件寫入對話框中 gettexpaint 為自訂的 Paint 物件 int TEXT_OFFSET_X X = 10; int TEXT_OFFSET_Y = 15; String showevent = selectedmappoint.getevent(); canvas.drawtext(showevent,infowindowoffsetx+text_offset_x,infowindowoffsety+text_offset_y,gettextpaint()); 78

40 自訂的 Paint 物件 路徑對話框設計 在此函式中新增一個 Paint() 物件 利用 setargb() 設定顏色 setantialisa() 設定反鋸齒 public Paint gettextpaint() { if ( textpaint == null) { textpaint = new Paint(); textpaint.setargb(255, 255, 255, 255); textpaint.setantialias(true); return textpaint; 79 路徑對話框設計 private void drawinfowindow(canvas canvas, MapViewmapView, boolean shadow) { if ( selectedmappoint!= null) { if (shadow) { else { Point seldestinationoffset = new Point(); mapview.getprojection().topixels(selectedmappoint.getpoint(), seldestinationoffset); int INFO_WINDOW_WIDTH = 200; int INFO_WINDOW_HEIGHT O = 20; RectF infowindowrect = new RectF(0,0,INFO_WINDOW_WIDTH,INFO_WINDOW_HEIGHT); int infowindowoffsetx = seldestinationoffset.x-info_window_width/2; int infowindowoffsety = seldestinationoffset.y-info_window_height-bubbleicon.getheight(); infowindowrect.offset(infowindowoffsetx,infowindowoffsety); canvas.drawroundrect(infowindowrect, 5, 5, getinnerpaint()); canvas.drawroundrect(infowindowrect, 5, 5, getborderpaint()); int TEXT_OFFSET_X = 10; int TEXT_OFFSET_Y = 15; String showevent = selectedmappoint.getevent(); canvas.drawtext(showevent,infowindowoffsetx+text_offset_x,infowindowoffsety+text_offset_y,gettextpaint()); 80

41 ontap() 事件 設定當手觸碰到螢幕時事件 首先, 當手觸碰到螢幕時會去看 selectpoint 是否為 Null, 並將結果存入 isremovepriorpopup p中 private MapPoint public boolean ontap(geopoint p, MapView mapview) { boolean isremovepriorpopup = (selectedmappoint!= null);. 81 ontap() 事件 呼叫 gethitmappoint() 確認觸碰的點是否是路徑上的 Point, 若是則回傳觸碰到 Point selectedmappoint = gethitmappoint(mapview,p); 測試 ir isremovepriorpopup Pi P OR (selectedmappoint!= null), 若回傳 True 則重畫畫面 if ( isremovepriorpopup selectedmappoint!= null) { mapview.invalidate(); 82

42 ontap() 事件 回傳 (return selectedmappoint!= null), 畫對話方框時會依據這回傳的值 private MapPoint public boolean ontap(geopoint p, MapView mapview) { boolean isremovepriorpopup = (selectedmappoint!= null); selectedmappoint = gethitmappoint(mapview,p); if ( isremovepriorpopup selectedmappoint!= null) { mapview.invalidate(); return selectedmappoint!= null; 83 確認觸碰點是否在路徑上 宣告一 MapPoint 表示未來要回傳的 Point 宣告一方框表示觸控的區域 宣告一 Point-screenCoords 用來投影 routepath 上的 Point 宣告一 Point-touchCoords 用來投影處空到螢幕上的 Point MapPoint hitmaplocation = null; RectF hittestrecr = new RectF(); Point screencoords = new Point(); Point touchcoords = new Point(); 84

43 確認觸碰點是否在路徑上 在 While 迴圈中 將路徑上的 Point 投影至宣告的 screencoords mapview.getprojection().topixels(testlocation.getpoint(), screencoords); 設定觸控的範圍 hittestrecr.set(-mradius,-mradius*2,mradius,0); hittestrecr.offset(screencoords.x,screencoords.y); 85 確認觸碰點是否在路徑上 將觸控的 Point 投影至 touchcoords mapview.getprojection().topixels(tappoint, touchcoords ); 若觸控的 Point 在設定的方框內, 則 break 跳出迴圈, 並將此 Point assign 至 hitmaplocation 中 if (hittestrecr.contains(touchcoords.x, touchcoords.y)) { hitmaplocation = testlocation; break; 回傳 hitmaplocation tappoint = null return hitmaplocation; 86

44 確認觸碰點是否在路徑上 確定觸碰的 Point 是否在 routepath 上 private MapPoint gethitmappoint(mapviewmapview, GeoPoint tappoint) { MapPoint hitmaplocation = null; RectF hittestrecr = new RectF(); Point screencoords = new Point(); Point touchcoords = new Point(); Iterator<MapPoint> iterator = this.getroutepath().iterator(); while(iterator.hasnext()) t h t()) { MapPoint testlocation = iterator.next(); mapview.getprojection().topixels(testlocation.getpoint(), screencoords); hittestrecr.set(-mradius,-mradius*2,mradius,0); hittestrecr.offset(screencoords.x,screencoords.y); mapview.getprojection().topixels(tappoint, touchcoords ); if (hittestrecr.contains(touchcoords.x, touchcoords.y)) { hitmaplocation = testlocation; break; tappoint = null return hitmaplocation; 87 練習時間 練習時間 將 Route 中路徑改為事件路徑 加上觸碰對話框 88

45 設計泡泡對話框 (1) 外部這一個水平 Linear Layout 是一個 Image View 內部是一個垂直的 Linear Layout 89 設計泡泡對話框 (2) 外部整個 Linearlayout 設定 <?xml version="1.0 0" encoding="utf utf-8 8"?> <LinearLayout xmlns:android=" android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="horizontal" android:paddingbottom="35dip" android:paddingleft="10dip" android:minwidth="200dip" @ _ overlay_ bg_ selector" android:paddingtop="0dip" android:paddingright="0dip">.. </LinearLayout> 90

46 設計泡泡對話框 (3) 設定當按到 Bulloon 時 Bullon overlay bg selector" drawable/balloon_overlay_bg_selector 為一個 XML 檔內容如下 <?xml version="1.0" encoding="utf-8"?> <selector xmlns:android=" android com/apk/res/android"> <item android:state_pressed="true" /> <item android:state_pressed="false" /> </selector> 91 設計泡泡對話框 (4) 內部垂直 Linearlayout <LinearLayout android:layout_width="wrap_content" idth " " android:layout_height="wrap_content" android:orientation="vertical" android:layout_weight="1" android:paddingtop="10dip" <TextView android:layout_height="wrap_content" android:layout_width="fill_parent" android:text="balloon balloon_item_title title" android:textsize="16dip" android:textcolor="#ff000000"></textview> <TextView android:layout_height="wrap_content" android:layout_width="fill_parent" it i t" android:text="balloon_item_snippet" android:textsize="12dip"></textview> </LinearLayout> 92

47 ImageView 設定 設計泡泡對話框 (5) <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" _ img_ button" android:paddingleft="10dip" android:paddingbottom="10dip" android:paddingright="8dip" android:paddingtop="8dip"> </ImageView> 93