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

Answer 2

这并不像特洛特那样简单，因为POV会出错。我只花了几个小时就这个，这是我的回答，对于那些最终提出这个问题的人（因为这是我找到的问题之一，但答案没有用）。

默认情况下，街景POV是拍摄图像时卡车所朝向的方向（图中）。您需要获取卡车的位置和房屋的位置，并计算从第一个位置到第二个位置的“航向”，然后将您的街景位置设置为卡车的位置，并使用您刚刚计算的标题：

// adrloc=target address // svwloc=street-view truck location svwService.getPanoramaByLocation(adrloc,svwdst,function(dta,sts) { if(sts==google.maps.StreetViewStatus.OK) { var svwloc=dta.location.latLng; var svwhdg=google.maps.geometry.spherical.computeHeading(svwloc,adrloc); var svwmap=avwMap.getStreetView(); svwmap.setPosition(svwloc); svwmap.setPov({ heading: svwhdg, pitch: 0 }); svwMarker=new google.maps.Marker({ map:svwmap, position: adrloc }); svwmap.setVisible(true); } else { ... }

使用街景的另一个技巧/陷阱是，您需要通过反复调用getPanoramaByLocation并逐渐增加距离来获取距您地址最近的街道视图，直到您成功或达到最大距离为止。我用这段代码解决了这个问题：

var SVW_MAX=100; // maximum street-view distance in meters var SVW_INC=10; // increment street-view distance in meters var svwService=new google.maps.StreetViewService(); // street view service var svwMarker=null; // street view marker // NOTE: avwMap is the aerial view map, code not shown ... resolveStreetView(avwMap.getCenter(),SVW_INC); ... var resolveStreetView=function(adrloc,svwdst) { svwService.getPanoramaByLocation(adrloc,svwdst,function(dta,sts) { if(sts==google.maps.StreetViewStatus.OK) { var svwloc=dta.location.latLng; var svwhdg=google.maps.geometry.spherical.computeHeading(svwloc,adrloc); var svwmap=avwMap.getStreetView(); svwmap.setPosition(svwloc); svwmap.setPov({ heading: svwhdg, pitch: 0 }); svwMarker=new google.maps.Marker({ map:svwmap, position: adrloc }); svwmap.setVisible(true); } else if(svwdst<SVW_MAX) { resolveStreetView(adrloc,svwdst+SVW_INC); } }); }

实施Google Maps v3街景视图

2 个答案: