Sterowanie pozycją kamery

W przypadku map 3D w interfejsie Maps JavaScript API ostrość kamery jest zarządzana za pomocą opcji cameraPosition.

Kluczowe zachowania:

  • Z center: współrzędne geograficzne określają dokładny punkt na mapie, w którym znajduje się kamera.
  • Z cameraPosition: kamera jest umieszczona we współrzędnych podanych podczas budowy. Często utrudnia to wyśrodkowanie widoku na określonym ważnym miejscu.

Poniższy przykład pokazuje, jak zainicjować mapę za pomocą opcji center, aby zapewnić określony punkt centralny. Znacznik wskazuje podany punkt środkowy w center:

CSS

gmp-map-3d {
  height: 100%;
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
style.css

HTML

<html>
    <head>
        <title>3D Camera Position</title>

        <link rel="stylesheet" type="text/css" href="./style.css" />
    </head>
    <body>
        <gmp-map-3d
            center="40.7860524,-73.9634983,0"
            range="1500"
            tilt="70"
            heading="-150"
            mode="satellite">
            <gmp-marker position="40.7860524,-73.9634983" altitude-mode="clamp-to-ground"></gmp-marker>
        </gmp-map-3d>

        <script
            async
            src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8&v=beta&libraries=maps3d"></script>
    </body>
</html>
index.html

Wypróbuj przykład

Pole widzenia i zasięg

Możesz dostosować widoczny obszar mapy za pomocą 2 różnych parametrów: zasięgu i pola widzenia. Obie te opcje wpływają na poziom „powiększenia”, ale działają inaczej:

  • range: określa fizyczną odległość między kamerą a punktem środkowym. Dostosowanie tego ustawienia jest równoznaczne z przesunięciem kamery bliżej mapy lub dalej od niej.

  • fov (Pole widzenia): kontroluje kąt obiektywu kamery. Wyższa wartość działa jak obiektyw szerokokątny, pokazując więcej peryferii, a niższa wartość działa jak teleobiektyw.

Poniższe porównanie pokazuje tę samą mapę na przeciwnych końcach fovspektrum. Na mapie po lewej stronie pole widzenia jest ustawione na 5 (wąskie/teleobiektyw), a na mapie po prawej – na 80 (szerokokątne).

Porównanie dwóch renderowanych w 3D zdjęć lotniczych mostu Golden Gate. Po lewej stronie widać szeroki widok z lotu ptaka na całe przęsło mostu i półwysep Marin Headlands. Po prawej stronie znajduje się zbliżenie czerwonej wieży podwieszanej i płyty mostu pod stromym kątem w dół.