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];

完成圖如下:
























沒有很高深的技巧, 也不會太複雜.
分享給需要的人~

張貼者： 於
標籤： , ,

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)

內容回應