目录

Camera Control

Map Moving

You can call the map.panTo(latLng) method to move the map center to a specified coordinate point.
<tr>
    <td>X/Latitude:</td>
    <td><input id="xLatInput" type="text" value="48.8"/></td>
</tr>
<tr>
    <td>Y/Longitude:</td>
    <td><input id="yLngInput" type="text" value="2.3"/></td>
</tr>

<script>
    var lat = Number(document.getElementById("xLatInput").value);
    var lng = Number(document.getElementById("yLngInput").value);
    map.panTo({lat: lat, lng: lng});
</script>

Map Shift

You can call the map.panBy(x, y) method to shift the map center by the specified x and y values (in pixels).
<tr>
    <td>X/Latitude:</td>
    <td><input id="xLatInput" type="text" value="100"/></td>
</tr>
<tr>
    <td>Y/Longitude:</td>
    <td><input id="yLngInput" type="text" value="100"/></td>
</tr>

<script>
    var x = Number(document.getElementById("xLatInput").value);
    var y = Number(document.getElementById("yLngInput").value);
    map.panBy(x, y);
</script>

Zoom Control

You can call the map.setZoom(zoom) method to specify the map zoom level, or call the map.zoomIn() or map.zoomOut() method to increase or decrease the zoom level by 1 respectively.
<tr>
     <td>Super Input:</td>
     <td><input id="superInput" type="text" value=""/></td>
</tr>

<script>
    var zoom = Number(document.getElementById("superInput").value);
    // Set the map zoom coefficient.
    map.setZoom(zoom);
    // Zoom in on the map by one level.
    map.zoomIn();
    // Zoom out on the map by one level.
    map.zoomOut();
</script>

Area Control

You can call the map.fitBounds(bounds) method to set the map display scope.
<tr>
    <td>SouthWestLat:</td>
    <td><input id="swLatInput" type="text" value="39.82"/></td>
</tr>
<tr>
    <td>SouthWestLng:</td>
    <td><input id="swLngInput" type="text" value="116.3"/></td>
</tr>
<tr>
    <td>NorthEastLat:</td>
    <td><input id="neLatInput" type="text" value="40.0"/></td>
</tr>
<tr>
    <td>NorthEastLng:</td>
    <td><input id="neLngInput" type="text" value="116.5"/></td>
</tr>

<script>
    var swLat = Number(document.getElementById("swLatInput").value);
    var swLng = Number(document.getElementById("swLngInput").value);
    var neLat = Number(document.getElementById("neLatInput").value);
    var neLng = Number(document.getElementById("neLngInput").value);
    map.fitBounds({
        sw: {lng: swLng, lat: swLat},
        ne: {lng: neLng, lat: neLat},
    });
<script>