メインコンテンツまでスキップ

Set pitch and bearing

Map options extend CameraOptions, so you can set more than the center and zoom. This example sets the pitch and bearing.

PLAYGROUND
Location Helper

For help testing with different camera pitches, bearings, tilts and zoom levels for the view you want, try our Location Helper tool.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Set pitch and bearing</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<link href="https://api.mapbox.com/mapbox-gl-js/v3.8.0/mapbox-gl.css" rel="stylesheet">
<script src="https://api.mapbox.com/mapbox-gl-js/v3.8.0/mapbox-gl.js"></script>
<style>
body { margin: 0; padding: 0; }
#map { position: absolute; top: 0; bottom: 0; width: 100%; }
</style>
</head>
<body>
<div id="map"></div>
<script>
// TO MAKE THE MAP APPEAR YOU MUST
// ADD YOUR ACCESS TOKEN FROM
// https://account.mapbox.com
mapboxgl.accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN';
const map = new mapboxgl.Map({
container: 'map',
// Choose from Mapbox's core styles, or make your own style with Mapbox Studio
style: 'mapbox://styles/mapbox/streets-v12',
// camera options properties - https://docs.mapbox.com/help/glossary/camera/
center: [-73.5804, 45.53483],
pitch: 60, // pitch in degrees
bearing: -60, // bearing in degrees
zoom: 10
});
</script>

</body>
</html>
このコードスニペットは、YOUR_MAPBOX_ACCESS_TOKENあなたのMapboxアカウントのアクセストークンに置き換えるまで、期待通りに動作しません。
このexampleは役に立ちましたか?