实施Google Maps v3街景视图

Question

我试图弄清楚如何将以下三个地图中的一个变成街景.

• 路线图
• 混合动力
• 卫星

这是我用来生成三个不同谷歌地图的代码:

var map;
var map2;
var map3;

$(document).ready(function(){

google.maps.event.addDomListener(window, 'load', initialize);

function initialize() {
    var myLatLng = new google.maps.LatLng(<?php echo $latitude; ?>, <?php echo $longitude; ?>);

var myOptions = {
    zoom: 15,
    center: myLatLng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
    }
map = new google.maps.Map(document.getElementById("map-canvas-1"),myOptions); 

var myOptions2 = {
    zoom: 15,
    center: myLatLng,
    mapTypeId: google.maps.MapTypeId.HYBRID
    }
map2 = new google.maps.Map(document.getElementById("map-canvas-2"),myOptions2);  

var myOptions3 = {
    zoom: 15,
    center: myLatLng,
    mapTypeId: google.maps.MapTypeId.SATELLITE
    }
map3 = new google.maps.Map(document.getElementById("map-canvas-3"),myOptions3);  

var marker = new google.maps.Marker({
  position: myLatLng, 
  map: map, 
  title:"Map1" }); 

  var marker = new google.maps.Marker({
  position: myLatLng, 
  map: map2, 
  title:"Map2" }); 

  var marker = new google.maps.Marker({
  position: myLatLng, 
  map: map3, 
  title:"Map3" }); 
}

这是地图划分的代码:

<div id="maptabs">
    <ul>
        <li><a href="#maptabs-1">Road Map</a></li>
        <li><a href="#maptabs-2">Hybrid</a></li>
        <li><a href="#maptabs-3">Satellite</a></li>
    </ul>
    <div id="maptabs-1">            
        <div id="map-canvas-1" class="map"></div>
    </div>
    <div id="maptabs-2">    
        <div id="map-canvas-2" class="map"></div>
    </div>
    <div id="maptabs-3">    
        <div id="map-canvas-3" class="map"></div>
    </div>
</div> 

如何更改卫星地图的地图选项以将其转换为街景视图？谢谢.

Answer 1

您无法通过更改MapOptions来执行此操作,因为街道视图不是MapType.最简单的方法是以编程方式指示地图显示其StreetViewPanorama,如下所示:

map3.getStreetView().setPosition(myLatLng);
map3.getStreetView().setVisible(true);