【发布时间】：2020-06-03 16:21:38
【问题描述】：
我决定尝试使用 googlemaps 和 ISS api 来构建一个基本的跟踪器。我计划为此添加一堆东西，但现在这很简单。
我遇到的问题是，我可以在 asp 中设置虚拟值：纬度和经度标签，然后用它们填充一个字符串，我可以在谷歌地图中使用。
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 时，我试图不为此增加任何复杂性，但这不起作用让我感到困惑，因为我看不出虚拟值与我从 api 获得的值有什么不同。
下面是我在这个页面的所有代码。
<%@ 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>
【问题讨论】：
标签： javascript html asp.net google-maps api-design