在JavaScript中通过引用传递变量

时间:2017-02-22 20:20:05

标签: javascript variables center

我正在尝试为用户当前位置显示和居中地图。如果我手动输入硬编码的纬度和经度,一切正常,但这些需要是动态的,因为一个用户经常更改位置。

我怀疑自己犯了一个基本错误,但我的逻辑似乎对我来说是正确的。请检查我的工作,让我知道我做错了什么?用纬度和经度标注的行是我想要使用的行,而不是使用硬编码值的前一行。

<!DOCTYPE html>
<html>
<head>
    <title>W123</title>
    <meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>

</head>

<body>
    <div id='printoutPanel'></div>
    <div id='myMap' style='width: 100vw; height: 100vh;'></div>

    <script type='text/javascript'>

        function showlocation() {
            navigator.geolocation.getCurrentPosition(getLocation);
        }

        function getLocation(position) {
            var latitude = position.coords.latitude;
            var longitude = position.coords.longitude;
            }

        function loadMapScenario() {
            var mapOptions = {
                credentials: 'My API key code goes here',
                center: new Microsoft.Maps.Location(39.1887643719098, -92.8261546188403),
                //center: new Microsoft.Maps.Location(latitude, longitude),
                mapTypeId: Microsoft.Maps.MapTypeId.road,
                zoom: 8
            };

            var map = new Microsoft.Maps.Map(document.getElementById('myMap'), mapOptions);
            var urlTemplate = 'http://mesonet.agron.iastate.edu/cache/tile.py/1.0.0/nexrad-n0q-{timestamp}/{zoom}/{x}/{y}.png';
            var timestamps = ['900913-m50m', '900913-m45m', '900913-m40m', '900913-m35m', '900913-m30m', '900913-m25m', '900913-m20m', '900913-m15m', '900913-m10m', '900913-m05m', '900913'];
            var tileSources = [];
            for (var i = 0; i < timestamps.length; i++) {
                var tileSource = new Microsoft.Maps.TileSource({
                    uriConstructor: urlTemplate.replace('{timestamp}', timestamps[i])
                });
                tileSources.push(tileSource);
            }
            var animatedLayer = new Microsoft.Maps.AnimatedTileLayer({ mercator: tileSources, frameRate: 500 });
            map.layers.insert(animatedLayer);
        }

    </script>
    <script type='text/javascript' src='http://www.bing.com/api/maps/mapcontrol?branch=experimental&callback=loadMapScenario' async defer></script>
</body>
</html>

1 个答案:

答案 0 :(得分:0)

您希望将纬度和经度传入loadMapScenario功能,如下所示

function loadMapScenario(latitude,longitude) {
      ....your code here....
}

将bing map include中的回调更改为“mapUserLocation”之类的新函数,然后让mapUserLocation执行以下任务

function mapUserLocation() {
     // code here to get the latitude and longitude from users position
     loadMapScenario(latitude,longitude);
}