Question

我正在自学脚本并且学到了很多东西。但是，我坚持这一点。我想要显示天气图并将其置于用户所在位置。这是我到目前为止在我的html体内的内容..

<div id="map-canvas"></div>

<div id="loading">Loading animation layers... <br>
 <span id="progress"></span>% done.
</div>

<script type="text/javascript">
  var map, radar, satellite;
  var animationSync;

  // GeoLocation Services
     function showLocation(position) {
        var latitude = position.coords.latitude;
        var longitude = position.coords.longitude;
        }

     function errorHandler(err) {
        if(err.code == 1) {
           alert("Error: Access is denied!");
        }
        else if( err.code == 2) {
           alert("Error: Position is unavailable!");
        }
        }

     function getLocation(){
        if(navigator.geolocation){
           // timeout at 60000 milliseconds (60 seconds)
           var options = {timeout:60000};
           navigator.geolocation.getCurrentPosition(showLocation, errorHandler, options);
        }
        else{
           alert("Sorry, browser does not support geolocation!");
        }
        }
  // End GeoLocation Services  

  map = new aeris.maps.Map('map-canvas', {zoom: 9, center: [36.0462, -96.9942]});

  // here is what I am wanting to do instead of the above line..
  // map = new aeris.maps.Map('map-canvas', {zoom: 9, center: [latitude +',' + longitude]});

如果我硬编码LAT和LON，我可以完美地显示地图，但这不是我需要的。我相信我的GeoLocation例程正在工作，因为我的浏览器中的控制台没有显示任何错误，只有当我尝试使用LAT和LONG作为变量来解决我遇到的问题时才会出现问题。我希望这只是一个语法类型的问题，但我只是不知道这个问题。我也尝试使用 map.setCenter 命令，但无法确定使用它的位置，因此它可以工作。

提前感谢您的帮助。

Answer 1

只需用

替换最后一行

map = new aeris.maps.Map('map-canvas', {zoom: 9, center: [latitude,   longitude]});

不需要引号，并使用单个字符串值

在数组中使用2个值转换数组

Answer 2

当前问题

现在的问题是您正在使用latitude和longitude执行字符串连接。您可以在数组中正常使用它们：

map = new aeris.maps.Map('map-canvas', {zoom: 9, center: [latitude, longitude]});

可能有用的更多信息：

要记住的是，这两个变量都必须在范围内，而目前它们并不存在。 latitude和longitude仅存在于showLocation()内，为了使事情更加复杂，它会成为回调，这意味着您的new aeris.maps.Map()将失败，因为这两个值都未设置。

如果您只想尝试在当前用户的位置周围显示地图，则应该这样做：

var map, radar, satellite;
var animationSync;

// GeoLocation Services
function showLocation(position) {
    var latitude = position.coords.latitude;
    var longitude = position.coords.longitude;

    map = new aeris.maps.Map("map-canvas", {
        zoom: 9,
        center: [latitude, longitude]
    });
}

function errorHandler(err) {
    if (err.code == 1) {
        alert("Error: Access is denied!");
    } else if (err.code == 2) {
        alert("Error: Position is unavailable!");
    }
}

function getLocation() {
    if (navigator.geolocation) {
        // timeout at 60000 milliseconds (60 seconds)
        var options = {
            timeout: 60000
        };
        navigator.geolocation.getCurrentPosition(showLocation, errorHandler, options);
    } else {
        alert("Sorry, browser does not support geolocation!");
    }
}

getLocation();

由于动作是异步发生的，这有点棘手，这意味着你在调用map之后必须对showLocation执行任何操作。

使用地理位置居中地图

2 个答案:

当前问题

可能有用的更多信息：