Googlemaps Api 奇怪的行為
[英]Googlemaps Api weird behavior
問題描述
我決定嘗試使用 googlemaps 和 ISS api 來構建一個基本的跟蹤器。 我計划為此添加一堆東西，但現在這很簡單。
我遇到的問題是，我可以在 asp:Labels for Latitude & Longitude 中設置虛擬值，然后用它們填充一個字符串，我可以在谷歌地圖中使用。
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>
2 個解決方案
解決方案1
1 已采納 2020-02-19 14:26:26
你的問題是因為事情發生的時候
您的 getJSON 調用啟動，然后將在未來的某個時刻返回數據響應，但是您的其余代碼（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 調用之前創建地圖和標記，並在獲得 JSON 響應時更新標記位置。
另外我會注意到你正在使用 JavaScript 和 JQuery 的混合體，這並不漂亮
解決方案2
1 2020-02-19 14:31:16
看起來你對 JS API 調用不了解。 當您調用 $.getJSON 時，您有回調方法，該方法將在加載數據時產生結果。 因此，當您創建標記時，您還沒有定義 IIS 緯度/經度坐標。 關於 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);
}
Vue.js GoogleMaps API 與@googlemaps/js-api-loader
[英]Vue.js GoogleMaps API with @googlemaps/js-api-loader
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.