问题描述
我想显示可用于选择一个点是由街景在一个单独的区域中显示的图形页面。我知道，API不允许多个MapViews在一个单一的过程。
I want to display a MapView that may be used to select a point to be displayed by StreetView in a separate area. I know that the API disallows multiple MapViews in a single process.
我怎样才能使街景在不同的区域相比，其显示图形页面显示？
How can I cause StreetView to display in a different area than that which displays MapView?
我已经能够抢到一个静态的街景没有任何问题，但我希望能有动态的街景和图形页面。
I have been able to grab a static streetview without any problems, but I want to have dynamic StreetView and MapView.
aTdHvAaNnKcSe（在此先感谢）
aTdHvAaNnKcSe (THANKS in ADVANCE)
推荐答案
您可以装载360度全景的 。
You can load 360 degree panoramic Google street-view in your WebView.
请尝试以下的活动中，无论谷歌街道视图和谷歌地图可以同时在一个活动导航：
Try following activity in which both google-street-view and google-map can be navigated simultaneously in single Activity :
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页面，然后你可以修改它根据使用的。
You can place this as static HTML page in assets folder of your application and then you can modify it's java-script according to your needs using Google street-view API.
下面我张贴样品 streetviewscript.html ，你可以把你的应用程序的资源文件夹，自定义，根据您的需要：
Here I am posting sample streetviewscript.html that you can put in assets folder of your application and customize it according to your needs :
<!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：
Edit : For simultaneously navigating two street views, load following HTML from assets :
<!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"> </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"> </td>
</tr>
<table id="links_table"></table>
</table>
</div>
</body>
</html>
这篇关于如何显示图形窗口和同时一个街景？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！