Mapbox GL Map不以初始位置为中心

Question

我在Angular 2中使用mapbox gl根据用户的当前位置绘制地图。我的代码如下：

executemap() {
console.log(this.locationService.currentLat, this.locationService.currentLng);
this.map = new mapbox.Map({
  style: 'mapbox://styles/mapbox/streets-v10',
  center: [this.locationService.currentLat, this.locationService.currentLng],
  zoom: 9,


  container: 'map'
});


console.log('map loaded');
console.log(this.map);
    console.log(this.map.getCenter().toString());
var latLng = new mapbox.LngLat(this.locationService.currentLat,this.locationService.currentLng);
this.map.resize();
this.map.setZoom(2);

}

在这个例子中，我使用坐标41.8692324 -87.6630301，这是芝加哥（基于我的控制台日志，我可以验证初始化地图时坐标是否存在）。我从谷歌的地方得到这些坐标。当我运行地图时，出于某种原因它以南极洲为中心：

我正在使用默认样式和tileset。我该怎么办？

Answer 1

你的Lat / Lng错误的方法！

另外，建议您考虑用户是否拒绝访问地理位置信息（IP）。我建议添加一个默认的lat / lng来重新开始，也许是一个消息 - 在这个例子中默认为纽约。

＆＃13;

＆＃13;

var options = {
  enableHighAccuracy: true,
  timeout: 5000,
  maximumAge: 0
};

function success(pos) {
  crd = pos.coords;
  loadMap(crd.longitude,crd.latitude);
};

function error(err) {
  console.log(`ERROR(${err.code}): ${err.message}`);
  loadMap(-73.935242,40.730610);
};

navigator.geolocation.getCurrentPosition(success, error, options);

function loadMap(lng,lat) {
 mapboxgl.accessToken = 'pk.eyJ1IjoiZGF2aWRiYXR0eSIsImEiOiJjajBqc2hqZ3YwMDN5MndvbDUxaDhoMDV6In0.w7sfrB5JeCH92sY-l0TQSg';
var map = new mapboxgl.Map({
    container: 'map', // container id
    style: 'mapbox://styles/mapbox/streets-v9', // stylesheet location
    center: [lng,lat], // starting position [lng, lat]
    zoom: 9 // starting zoom
});
}

＆＃13;

body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }

＆＃13;

<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.40.1/mapbox-gl.css" rel="stylesheet"/>
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.40.1/mapbox-gl.js"></script>

<div id='map'></div>

＆＃13;

＆＃13;

＆＃13;