代码之家 › 专栏 › 技术社区 › Julia

mapbox放大mapdidload

mapbox javascript

Julia · 技术社区 · 6 年前

我使用MAPBOX加载一个地图,看起来地图是放大到最大的。我想让地图看起来小一些。如何放大地图加载?

这是装载地图的代码。代码加载了我当前的位置,看起来太大了。我希望地图在默认情况下是放大的,而不是点击+来放大和缩小地图。谢谢。

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Geolocation</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.mapbox.com/mapbox.js/v3.1.1/mapbox.js'></script>
<link href='https://api.mapbox.com/mapbox.js/v3.1.1/mapbox.css' rel='stylesheet' />
<style>
  body { margin:0; padding:0; }
  #map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>

<div id='map'></div>
<a href='#' id='geolocate' class='ui-button'>Find me</a>

<script>
L.mapbox.accessToken = 'pk.eyJ1IjoidGltbGlzdGVuIiwiYSI6ImNqaWs5eWltbTAybG8za21zNjVuZjg5MW4ifQ.xCKtim61H1YXAkU5KT9-FQ';
var map = L.mapbox.map('map', 'mapbox.streets');

var myLayer = L.mapbox.featureLayer().addTo(map);

// This uses the HTML5 geolocation API, which is available on
// most mobile browsers and modern browsers, but not in Internet Explorer
//
// See this chart of compatibility for details:
// http://caniuse.com/#feat=geolocation
if (!navigator.geolocation) {
    geolocate.innerHTML = 'Geolocation is not available';
} else {
      map.locate();
}

// Once we've got a position, zoom and center the map
// on it, and add a single marker.
map.on('locationfound', function(e) {
    map.fitBounds(e.bounds);

    myLayer.setGeoJSON({
        type: 'Feature',
        geometry: {
            type: 'Point',
            coordinates: [e.latlng.lng, e.latlng.lat]
        },
        properties: {
            'title': 'Here I am!',
            'marker-color': '#ff8888',
            'marker-symbol': 'star'
        }
    });

    // And hide the geolocation button
    geolocate.parentNode.removeChild(geolocate);
});

// If the user chooses not to allow their location
// to be shared, display an error message.
map.on('locationerror', function() {
    geolocate.innerHTML = 'Position could not be found';
});
</script>
</body>
</html>

2 回复 | 直到 5 年前

leelum1 6 年前

尝试用设置放大功能

map.setZoom(5);

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Geolocation</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.mapbox.com/mapbox.js/v3.1.1/mapbox.js'></script>
<link href='https://api.mapbox.com/mapbox.js/v3.1.1/mapbox.css' rel='stylesheet' />
<style>
  body { margin:0; padding:0; }
  #map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>

<div id='map'></div>
<a href='#' id='geolocate' class='ui-button'>Find me</a>

<script>
L.mapbox.accessToken = 'pk.eyJ1IjoidGltbGlzdGVuIiwiYSI6ImNqaWs5eWltbTAybG8za21zNjVuZjg5MW4ifQ.xCKtim61H1YXAkU5KT9-FQ';
var map = L.mapbox.map('map', 'mapbox.streets');

var myLayer = L.mapbox.featureLayer().addTo(map);

// This uses the HTML5 geolocation API, which is available on
// most mobile browsers and modern browsers, but not in Internet Explorer
//
// See this chart of compatibility for details:
// http://caniuse.com/#feat=geolocation
if (!navigator.geolocation) {
    geolocate.innerHTML = 'Geolocation is not available';
} else {
      map.locate();
}

// Once we've got a position, zoom and center the map
// on it, and add a single marker.
map.on('locationfound', function(e) {
    map.fitBounds(e.bounds);

    myLayer.setGeoJSON({
        type: 'Feature',
        geometry: {
            type: 'Point',
            coordinates: [e.latlng.lng, e.latlng.lat]
        },
        properties: {
            'title': 'Here I am!',
            'marker-color': '#ff8888',
            'marker-symbol': 'star'
        }
    });

    map.setZoom(5);

    // And hide the geolocation button
    geolocate.parentNode.removeChild(geolocate);
});

// If the user chooses not to allow their location
// to be shared, display an error message.
map.on('locationerror', function() {
    geolocate.innerHTML = 'Position could not be found';
});
</script>
</body>
</html>

Kosh 6 年前

你可以用 map.setView([latitude, longitude], zoom); 以下内容:

L.mapbox.accessToken = 'pk.eyJ1IjoidGltbGlzdGVuIiwiYSI6ImNqaWs5eWltbTAybG8za21zNjVuZjg5MW4ifQ.xCKtim61H1YXAkU5KT9-FQ';
var map = L.mapbox.map('map', 'mapbox.streets');
map.setView([40.7290255, -74.0026558], 13);

var myLayer = L.mapbox.featureLayer().addTo(map);

// This uses the HTML5 geolocation API, which is available on
// most mobile browsers and modern browsers, but not in Internet Explorer
//
// See this chart of compatibility for details:
// http://caniuse.com/#feat=geolocation
if (!navigator.geolocation) {
    geolocate.innerHTML = 'Geolocation is not available';
} else {
      map.locate();
}

// Once we've got a position, zoom and center the map
// on it, and add a single marker.
map.on('locationfound', function(e) {
    map.fitBounds(e.bounds);

    myLayer.setGeoJSON({
        type: 'Feature',
        geometry: {
            type: 'Point',
            coordinates: [e.latlng.lng, e.latlng.lat]
        },
        properties: {
            'title': 'Here I am!',
            'marker-color': '#ff8888',
            'marker-symbol': 'star'
        }
    });

    // And hide the geolocation button
    geolocate.parentNode.removeChild(geolocate);
});

// If the user chooses not to allow their location
// to be shared, display an error message.
map.on('locationerror', function() {
    geolocate.innerHTML = 'Position could not be found';
});

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Geolocation</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.mapbox.com/mapbox.js/v3.1.1/mapbox.js'></script>
<link href='https://api.mapbox.com/mapbox.js/v3.1.1/mapbox.css' rel='stylesheet' />
<style>
  body { margin:0; padding:0; }
  #map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>

<div id='map'></div>
<a href='#' id='geolocate' class='ui-button'>Find me</a>

</body>
</html>