JingJong's Blog: google map

2013年9月2日星期一

使用WebView來顯示google街景地圖

緣起

2012年底新版的google map開始就支援街景地圖,

如今google官方也都有開api出來取用街景.

如果app不想讓user跳出程式來觀看google街景地圖,

也不想k一堆官方文件, 用WebView來嵌入是最快選擇了.

需求

有gps座標資料, 然後想要顯示該地區的街景

實作

比較老土的作法是把下面的string存成一份html檔案在local,

然後讀出html後轉成string再把經緯度給填上.

後來發現也不用這麼搞, 直接寫一份就對了!

NSString *htmlString = [NSString stringWithFormat:@"<html>\

                            <head>\
                            <meta id=\"viewport\" name=\"viewport\" content=\"width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;\">\
                            <script src='http://maps.google.com/maps/api/js?sensor=false' type='text/javascript'></script>\
                            </head>\
                            <body onload=\"new google.maps.StreetViewPanorama(document.getElementById('p'),{position:new google.maps.LatLng(%f, %f)});\" style='padding:0px;margin:0px;'>\
                            <div id='p' style='height:460;width:320;'></div>\
                            </body>\
                            </html>",lat, lon];
    webView = [[UIWebView alloc] initWithFrame:CGRectMake(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT)];
    webView.scalesPageToFit = YES;
    webView.scrollView.scrollEnabled = NO;
    webView.scrollView.bounces = NO;
    webView.delegate = self;
    [webView loadHTMLString:htmlString baseURL:nil];

完成圖如下:

沒有很高深的技巧, 也不會太複雜.

分享給需要的人~

參考連結: deeryrl.blog.163.com, google developers

2013年8月12日星期一

[Android] 使用Google Map with V2 API

1. 確認下載並配置好Google Play services SDK

Window > Android SDK Manager

題外話: 透過這個Google Play services APK 似乎有與server端連線, 否則怎麼能update new APIs?

再說連線方式猜測應該是類似推播方式, 註冊完等需要update時喚起手機端service APK對應function到server update?

如果Google Play services APK不大改interface, 開發者應該不會太痛苦才是

又發現Google Play services囊括Google+, map等服務, 這會不會很痴肥阿!?

不過這些服務都已經整合OAuth2相當方便阿

運作方式如下圖

1. ) 要把library import進來

2. ) project就在當初ADT下載回來的資料夾底下
(/sdk/extras/google/google_play_service)

3. ) import 進來的GooglePlay library 記得要build過!
確定在google_play_services_lib/bin/google-play-services_lib.jar是存在的
不然我們用到google map的專案會發生import path的error!

4. ) Build Target要記得換成Google APIs喔!!

2. 取得API key

https://code.google.com/apis/console/

1. ) 左側欄 > Services

Note: The Google Maps Android API v2 uses a new system of managing keys. Existing keys from a Google Maps Android v1 application, commonly known as MapView, will not work with the v2 API.

2. ) SHA1 key也不用開console辛苦尋找了

ADT > Preferences > Android > Build

Bingo! 裡頭的SHA1 fingerprint就是我們要的!

若是真要從console取得

keytool -list -v -keystore ~/.android/debug.keystore -alias androiddebugkey -storepass android -keypass android

在填key的時候別忘了尾巴要加上package name! (SHA1 fingerprint);com.example

3. 在Application的Manifest檔裡作設定

接下來就是把 Key 放進應用程式中.打開 AndroidManifest.xml 檔, 選擇 Application Tab,Add -> Meta Data, 在 Name 欄位填入 "com.google.android.maps.v2.API_KEY", 在 Value 欄位填入剛才複製的 API Key 。