Google 地图 Api 奇怪的行为

Question

我决定尝试使用 google 地图和国际空间站 api 来构建一个基本的跟踪器。我计划为此添加一堆东西，但现在这很简单。

我遇到的问题是，我可以在 asp:Labels 中为纬度和经度设置虚拟值，然后用它们填充一个字符串，我可以将其用于 google 地图。

var ISS = { lat: parseFloat(document.getElementById('lblLat').innerText), lng: parseFloat(document.getElementById('lblLong').innerText) };

这有效，当我尝试使用从 json 回调中获得的值时，即使我在使用 console.log() 时可以看到这些值，它们也不起作用。

ISS = { lat: data['iss_position']['latitude'], lng: data['iss_position']['longitude'] };

我尝试过不直接阅读，而是直接添加回 asp:Label 然后阅读，但它也不起作用。

我做错了什么？当我玩 googlemaps api 时，我尽量不增加任何复杂性，但这不起作用让我感到困惑，因为我看不出虚拟值与我从 [=30 得到的值有什么不同=].

下面是我为这个页面编写的所有代码。

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ISS.aspx.cs" Inherits="WebApps.IIS" %>

<!DOCTYPE html>
<html>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <head runat="server">
        <title>ISS Tracker</title>
        <style>
          #map {
            height: 400px;  /* The height is 400 pixels */
            width: 100%;  /* The width is the width of the web page */
           }
          #pageTitle{
              margin: auto;
              padding: 10px;
          }
        </style>
    </head>
    <body>
        <div id="pageTitle">
            <h3>ISS Tracker</h3>
            <h4>International Space Station</h4>
        </div>
        <form runat="server">
            <label>Latitude: </label><asp:Label runat="server" ID="lblLat"/><br />
            <label>Longitude: </label><asp:Label runat="server" ID="lblLong"/><br />
            <label>Time: </label><asp:Label runat="server" ID="lblTime" Text="13/02/2020 15:45:00" /><br />
            <asp:Button runat="server" ID="btnRefresh" Text="Refresh" onClick="btnRefresh_Click" style="height: 26px" />
            <div id="map"></div>
        </form>
        <script>

            //globals
            var map;
            var ISS;// = { lat: parseFloat(document.getElementById('lblLat').innerText), lng: parseFloat(document.getElementById('lblLong').innerText) };
            var image = 'http://icons.iconarchive.com/icons/goodstuff-no-nonsense/free-space/256/international-space-station-icon.png'

            // Initialize and add the map
            function initMap() {
                // The location of ISS
                $.getJSON('http://api.open-notify.org/iss-now.json?callback=?', function (data) {
                    ISS = { lat: data['iss_position']['latitude'], lng: data['iss_position']['longitude'] }; 
                    console.log("latitude: " + data['iss_position']['latitude'] + " & longitude: " + data['iss_position']['longitude']);
                    document.getElementById('lblLat').innerText = data['iss_position']['latitude'];
                    document.getElementById('lblLong').innerText = data['iss_position']['longitude'];
                });
                // The map, centered at ISS
                map = new google.maps.Map(
                    document.getElementById('map'), { zoom: 10, center: ISS });
                // The marker, positioned at ISS
                var marker = new google.maps.Marker({
                    position: ISS,
                    map: map,
                    icon: {
                        url: image,
                        scaledSize: new google.maps.Size(128, 128),
                        size: new google.maps.Size(128, 128)
                    }
                });
                marker.position = ISS;

            }

            //Will use later when i want to update
            function moveISS() {
                $.getJSON('http://api.open-notify.org/iss-now.json?callback=?', function (data) {
                    var lat = data['iss_position']['latitude'];
                    var lon = data['iss_position']['longitude'];
                    ISS = { lat: lat, lng: lon }; 
                    document.getElementById('lblLat').innerText = lat;
                    document.getElementById('lblLong').innerText = lon;
                });
                setTimeout(moveISS, 5000);
            } 
        </script>
        <script async defer src="https://maps.googleapis.com/maps/api/js?key=*****api key *****&callback=initMap">
        </script>
    </body>
</html>

Answer 1

你的问题是因为事情发生的时候

您的 getJSON 调用启动，然后将 return 在未来的某个时间点进行数据响应，但是您的其余代码（ISS 的值无效）将立即执行

var map;
var image = 'http://icons.iconarchive.com/icons/goodstuff-no-nonsense/free-space/256/international-space-station-icon.png';

// ISS start position
var ISS  = { lat: 0.0, lng: 0.0 };

function initMap() {
  // create the map and marker before you know where ISS is
  // The map, centered at ISS
   map = new google.maps.Map(
     document.getElementById('map'), { zoom: 10, center: ISS });
   // The marker, positioned at ISS
   var marker = new google.maps.Marker({
     position: ISS,
     map: map,
     icon: {
       url: image,
       scaledSize: new google.maps.Size(128, 128),
       size: new google.maps.Size(128, 128)
     }
   });


}

function updateISS() {
  // The location of ISS
  $.getJSON('http://api.open-notify.org/iss-now.json?callback=?', 
     function (data) {
       ISS = { 
         lat: data['iss_position']['latitude'], 
         lng: data['iss_position']['longitude'] 
       };

       // update the Marker position here
       marker.setPosition(ISS);

       console.log("latitude: " + ISS['lat'] + " & longitude: " + ISS['lng']);
       document.getElementById('lblLat').innerText = ISS['lat'];
       document.getElementById('lblLong').innerText = ISS['lng'];
     });

}

// update ISS position every 5 seconds.
var repeat = setInterval( updateISS, 5000)

以上是解决方案的第一步，在 getJSON 调用之前创建地图和标记 并在 [=25] 时更新标记位置=] 获得响应。

我还注意到您混合使用了 JavaScript 和 JQuery，这并不漂亮

Answer 2

看来您对 JS API 调用不太了解。当您调用 $.getJSON 时，您有回调方法，该方法将在加载数据时产生结果。因此，当您创建标记时，您没有定义 IIS lat/lng 坐标。您必须知道的关于 JS 的另一件有趣的事情 - JS 是一种同步语言，因此您的回调将在所有操作完成后执行（脚本的最后一行 - marker.position = ISS; ）。只需在 $.getJSON 回调中创建一个标记即可使其工作

我创建了一个工作演示，修复了一些其他存在的错误。

这里我显示的是起始位置——你必须将坐标转换为数字类型：

function initMap() {
            // The location of ISS
            $.getJSON('http://api.open-notify.org/iss-now.json?callback=?', function (data) {
                ISS = new google.maps.LatLng(Number(data.iss_position.latitude), Number(data.iss_position.longitude)); 
                console.log("latitude: " + data['iss_position']['latitude'] + " & longitude: " + data['iss_position']['longitude']);
                document.getElementById('lblLat').value = data['iss_position']['latitude'];
                document.getElementById('lblLong').value = data['iss_position']['longitude'];

                // The map, centered at ISS
            map = new google.maps.Map(
                document.getElementById('map'), { zoom: 10, center: ISS });
            // The marker, positioned at ISS
            marker = new google.maps.Marker({
                position: ISS,
                map: map,
                icon: {
                    url: image,
                    scaledSize: new google.maps.Size(128, 128),
                    size: new google.maps.Size(128, 128)
                }
            });

            });   
        }

移动标记代码（使用 google 类作为新位置 google.maps.LatLng）：

function moveISS() {
            $.getJSON('http://api.open-notify.org/iss-now.json?callback=?', function (data) {
                ISS = new google.maps.LatLng(Number(data.iss_position.latitude), Number(data.iss_position.longitude)); 
                document.getElementById('lblLat').value = data.iss_position.latitude;
                document.getElementById('lblLong').value = data.iss_position.longitude;
                marker.setPosition(ISS);
                map.setCenter(ISS);
            });

            setTimeout(moveISS, 5000);
        }

http://jsfiddle.net/cheaterr/41h7tmqb/11/

Google 地图 Api 奇怪的行为

Googlemaps Api weird behavior

html

javascript

asp.net

google-maps

api-design