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 szerokości i długości geograficznej określają dokładny punkt na mapie, w który skierowana jest 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:

<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=weekly&libraries=maps3d"></script>
    </body>
</html>
index.html

Zobacz pełny przykładowy kod źródłowy

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=weekly&libraries=maps3d"></script>
    </body>
</html>
index.html

Wypróbuj przykład

Pole widzenia i zasięg

Możesz dostosować widoczność mapy w obszarze wyświetlania za pomocą 2 różnych parametrów: range i fov. 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 z powietrza widoków 3D 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ół.