如何同時顯示MapView和StreetView？

我想要顯示一個MapView，它可以用來選擇一個要在一個單獨的區域中被StreetView顯示的點。我知道API在一個進程中不允許多個MapView。如何同時顯示MapView和StreetView？

如何讓StreetView顯示在與顯示MapView不同的區域？

我已經能夠抓住一個靜態街景沒有任何問題，但我想要動態StreetView和MapView。

aTdHvAaNnKcSe（在此先感謝）

來源

2011-09-28 kurtrisser

如何可以導致街景在比不同的區域，其顯示的MapView顯示？

街景僅在設備上可用作其自己的活動（來自其自己的應用程序），因此不能與任何自己的小部件一起顯示。

來源

2011-09-28 17:34:43 CommonsWare

Google AppMarket上有一個應用程序可以並排顯示地圖和街景。據我所知，它們不是靜態圖像。該應用程序被稱爲「步行街」從「GOGA」... – kurtrisser

@kurtrisser：他們肯定沒有使用街景應用程序。也許他們已經搭建了一個WebView，並且正在開發基於Web的街景。 – CommonsWare

您可以在您的WebView中加載360度全景Google street-view。

嘗試以下活動，其中兩個谷歌街道視圖以及Google地圖，可以在單一的活動同時導航：

public class StreetViewActivity extends Activity { 

    private WebView webView; 

    @Override 
    public void onCreate(Bundle savedInstanceState) { 
     super.onCreate(savedInstanceState); 
     setContentView(R.layout.activity_main); 
     mappingWidgets(); 
    } 

    private void mappingWidgets() { 

     webView = (WebView) findViewById(R.id.webView); 
     webView.getSettings().setJavaScriptEnabled(true); 

     webView.getSettings().setLoadWithOverviewMode(true); 
     webView.getSettings().setUseWideViewPort(true); 
     webView.getSettings().setSupportZoom(false); 


     // If you want to load it from assets (you can customize it if you want) 
     //Uri uri = Uri.parse("file:///android_asset/streetviewscript.html"); 

     // If you want to load it directly 
     Uri uri = Uri.parse("https://google-developers.appspot.com/maps/documentation/javascript/examples/full/streetview-simple"); 
     webView.loadUrl(uri.toString()); 
    } 
}

你可以把這個作爲靜態的HTML頁面在您的應用程序，然後資產文件夾您可以使用Google street-view API根據您的需要修改它的java腳本。

我在這裏發佈樣本streetviewscript.html，你可以把你的應用程序的資源文件夾，自定義，根據您的需要：

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <title>Google Maps JavaScript API v3 Example: Street View Layer</title> 
    <link href="/maps/documentation/javascript/examples/default.css" rel="stylesheet"> 
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true"></script> 
    <script> 

     function initialize() { 
     var fenway = new google.maps.LatLng(42.345573,-71.098326); 
     var mapOptions = { 
      center: fenway, 
      zoom: 14, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     }; 
     var map = new google.maps.Map(
      document.getElementById('map_canvas'), mapOptions); 
     var panoramaOptions = { 
      position: fenway, 
      pov: { 
      heading: 34, 
      pitch: 10, 
      zoom: 1 
      } 
     }; 
     var panorama = new google.maps.StreetViewPanorama(document.getElementById('pano'),panoramaOptions); 
     map.setStreetView(panorama); 
     } 
    </script> 
    </head> 
    <body onload="initialize()"> 
    <div id="map_canvas" style="width: 800px; height: 800px"></div> 
    <div id="pano" style="position:absolute; left:810px; top: 8px; width: 800px; height: 800px;"></div> 
    </body> 
</html>

編輯：可同時瀏覽兩個街道的意見，負荷跟蹤從HTML資產：

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <title>Google Maps JavaScript API v3 Example: Street View Events</title> 

    <STYLE type="text/css"> 
     body, html { height:100%; padding:0; margin:0;} 
     #pano { float:left } 
     #pano1 { float:right } 
    </STYLE> 
    <link href="/maps/documentation/javascript/examples/default.css" rel="stylesheet"> 
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script> 
    <script> 

     var cafe = new google.maps.LatLng(37.869085,-122.254775); 

     var heading_value = 270; 
     var pitch_value = 0; 
     var zoom_value = 1; 

     function initialize() { 

     var panoramaOptions = { 
      position: cafe, 
      pov: { 
      heading: heading_value, 
      pitch: pitch_value, 
      zoom: zoom_value 
      }, 
      visible: true 
     }; 

     var panorama = new google.maps.StreetViewPanorama(document.getElementById('pano'), panoramaOptions); 
     var panorama2 = new google.maps.StreetViewPanorama(document.getElementById('pano1'), panoramaOptions); 

     google.maps.event.addListener(panorama, 'pano_changed', function() { 
      var panoCell = document.getElementById('pano_cell'); 
      panoCell.innerHTML = panorama.getPano(); 
      panorama2.setPano(panorama.getPano()); 
     }); 

     google.maps.event.addListener(panorama, 'links_changed', function() { 
      var linksTable = document.getElementById('links_table'); 
      while(linksTable.hasChildNodes()) { 
       linksTable.removeChild(linksTable.lastChild); 
      }; 
      var links = panorama.getLinks(); 
      panorama2.setLinks(panorama.getLinks()); 
      for (var i in links) { 
       var row = document.createElement('tr'); 
       linksTable.appendChild(row); 
       var labelCell = document.createElement('td'); 
       labelCell.innerHTML = '<b>Link: ' + i + '</b>'; 
       var valueCell = document.createElement('td'); 
       valueCell.innerHTML = links[i].description; 
       linksTable.appendChild(labelCell); 
       linksTable.appendChild(valueCell); 
      } 
     }); 

     google.maps.event.addListener(panorama, 'position_changed', function() { 
      var positionCell = document.getElementById('position_cell'); 
      positionCell.firstChild.nodeValue = panorama.getPosition(); 
      panorama2.setPosition(panorama.getPosition()); 
     }); 

     google.maps.event.addListener(panorama, 'pov_changed', function() { 
      var headingCell = document.getElementById('heading_cell'); 
      var pitchCell = document.getElementById('pitch_cell'); 
      headingCell.firstChild.nodeValue = panorama.getPov().heading; 
      panorama2.setPov(panorama.getPov()); 
      pitchCell.firstChild.nodeValue = panorama.getPov().pitch; 
     }); 
    } 
    </script> 
    </head> 
    <body onload="initialize()"> 

    <div style="width:100%; height :100%; background-color:Lime;"> 
     <div id="pano" style="width:50%; height:100%; background-color:Blue;"> 
     </div> 
     <div id="pano1" style="width:50%; height:100%; background-color:Gray;"> 
     </div> 
    </div> 
     <div id="panoInfo" style="width: 425px; height: 240 px;float:left; display: none;"> 
     <table> 
      <tr> 
       <td><b>Position</b></td><td id="position_cell">&nbsp;</td> 
      </tr> 
      <tr> 

        <td><b>POV Heading</b></td><td id="heading_cell">270</td> 
       </tr> 
       <tr> 
        <td><b>POV Pitch</b></td><td id="pitch_cell">0.0</td> 
       </tr> 
       <tr> 
        <td><b>Pano ID</b></td><td id="pano_cell">&nbsp;</td> 
       </tr> 
       <table id="links_table"></table> 
      </table> 
     </div> 
     </body> 
    </html>

來源

2012-12-05 05:47:51

-1

在Android上查看示例街景全景和地圖可在https://developers.google.com/maps/documentation/android/code-samples。但我不確定它是否也適用於自定義街景。

來源

2015-07-05 17:13:29 UruGN

如何同時顯示MapView和StreetView？

回答

相關問題