Реализация Google Maps v3 Street View - PullRequest
Новая
       22

Реализация Google Maps v3 Street View

1 голос
/ 30 июня 2011

Я пытаюсь выяснить, как превратить одну из следующих трех карт в вид улицы.

  • Дорожная карта
  • Гибрид
  • Спутник

Ниже приведен код, который я использую для создания трех различных карт Google:1011 * 

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>

Как изменить параметры карты для спутниковой карты, чтобы превратить ее в вид улицы?Спасибо.

Ответы [ 2 ]

6 голосов
/ 30 июня 2011

Вы не можете сделать это, изменив MapOptions, потому что вид улицы не является MapType.Самое простое, что можно сделать, это, вероятно, программно дать команду карте показать ее StreetViewPanorama следующим образом: 

map3.getStreetView().setPosition(myLatLng);
map3.getStreetView().setVisible(true);
1 голос
/ 03 октября 2013

Это не так просто, как ответ Тротта, потому что 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);
            }
        });
    }
...