5

Preâmbulo

Eu utilizo Angular Google Maps para indicar a localização de vários prédios no campus de uma universidade. Minha inicialização é a seguinte:

 $scope.map = {
                    control: {},
                    center:
                    {
                        latitude: $scope.Item.Latitude,
                        longitude: $scope.Item.Longitude
                    },
                    zoom: 16,
                    options: {
                        streetViewControl: true,
                        maxZoom: 20,
                        minZoom: 8,
                        mapTypeId: google.maps.MapTypeId.HYBRID
                    },
                    showTraffic: true,
                    showBicycling: true,
                    events: {
                        blacklist: ['drag', 'dragend', 'dragstart', 'center_changed']
                    }
              };

Esse procedimento está funcionando, e permite a vizualização da seguinte maneira:

enter image description here

Entretanto, recentemente percebi que o Google Maps possui informação 3D da área coberta, e eu gostaria que o mapa fosse renderizado da seguinte maneira:

enter image description here

Pergunta

É possível, via via Angular Google Maps, configurar a inicialização do meu mapa de maneira a exibi-lo da maneira indicada?

Pergunta-bônus

...Seria possível girar a "câmera" programaticamente centrando na posição indicada de maneira a fazer o prédio girar?


Link de referência para a área indicada: https://www.google.com/maps/@40.9570608,-76.8816097,179a,20y,180h,41.69t/data=!3m1!1e3

Disclaimer: Este é um cross-post do SO original, 3D map visualization in Angular Google Maps

2
  • Traz a resposta de lá pra cá.
    – Maniero
    4/09/2015 às 17:12
  • Conseguiu Resolver?
    – durtto
    13/01/2016 às 11:28

1 Resposta 1

0

Não sei como poderia fazer o google exibir de maneira 3D, porem girar consegui montar um exemplo. Talvez o que pode fazer é mudar a inclinação na propriedade tilt, para parecer 3D, neste exemplo o tilt é 45.

var map;

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: {lat:37.4274745 , lng: -122.1719077},
    zoom: 18,
    mapTypeId: google.maps.MapTypeId.SATELLITE,
    heading: 90,
    tilt: 45
  });
}

function rotate90() {
  var heading = map.getHeading() || 0;
  map.setHeading(heading + 90);
}

function autoRotate() {
  // Determine if we're showing aerial imagery.
  if (map.getTilt() !== 0) {
    window.setInterval(rotate90, 3000);
  }
}
 html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #map {
        height: 100%;
      }
#floating-panel {
  position: absolute;
  top: 10px;
  left: 25%;
  z-index: 5;
  background-color: #fff;
  padding: 5px;
  border: 1px solid #999;
  text-align: center;
  font-family: 'Roboto','sans-serif';
  line-height: 30px;
  padding-left: 10px;
}
<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Girando Imagem</title>
  </head>
  <body>
    <div id="floating-panel"><input type="button" value="Girar" onclick="autoRotate();"></div>
    <div id="map"></div>
    <script async defer
        src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA1DxXp2RnMhOirzR8NVtYNJf6p_yW_qo0&callback=initMap"></script>
  </body>
</html>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .