gpt4 book ai didi

javascript - 在谷歌地图上显示位置变化,无需一次又一次地重新加载 map

转载 作者:行者123 更新时间:2023-11-29 21:42:01 28 4
gpt4 key购买 nike

每 30 秒后,我希望在不重新加载 map 的情况下重新加载谷歌地图上的位置。我做了以下事情:

  1. 使用 URL 从 gps 设备获取内容。
  2. 从 Url 获取经纬度。
  3. 在 map 上显示纬度和经度。

我的代码是:

 <?php
// hard coded latitude and longitude for an example
$latitude = 28.70956;
$longitude = 70.00767;
//In my code i have to fetch it from url every 30 seconds. And then Show them on the map
?>

<!doctype html>
<html>
<head>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api
/js?sensor=false"></script>
<script type="text/javascript">
var map;
function initialize() {
// Set static latitude, longitude value
var latlng = new google.maps.LatLng(<?php echo $latitude; ?>, <?php echo $longitude; ?>);
// Set map options
var myOptions = {
zoom: 16,
center: latlng,
panControl: true,
zoomControl: true,
scaleControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
// Create map object with options
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
<?php


echo "addMarker(new google.maps.LatLng(".$latitude.", ".$longitude."), map);";
?>
}
function addMarker(latLng, map) {
var marker = new google.maps.Marker({
position: latLng,
map: map,
draggable: true, // enables drag & drop
animation: google.maps.Animation.DROP
});

return marker;
}
</script>
</head>
<body onload="initialize()">
<div style="float:left; position:relative; width:1519px; border:0px #000 solid;">
<div id="map_canvas" style="width:950px;height:900px;border:solid black 1px;"></div>
</div>
</body>
</html>

在此代码中,我执行了获取位置并将其显示在 map 上的所有步骤。但是如何在固定时间后动态获取位置呢?我的问题不包含任何硬编码值,每次都需要从 URL 中获取值。

最佳答案

您可以结合使用 setInterval 和 Ajax 调用。如果您是 php 变量,则每次您需要在不加载页面的情况下使用 Ajax 获取数据时,变量都会发生变化。类似这样的东西(如果您使用的是 JQuery)。

setInterval(function() {
var coords = getLatLng(); // Grab the coordinates from url
updateMapMarker(coords); // Similar to what you've got
}, 30000); // 30 seconds

function getLatLng() {
$.ajax({
url: "your/route/that/returns/coordinates",
success: function(data) {
return [data.x, data.y];
},
});
}

在此处检查 JQuery Ajax: http://api.jquery.com/jquery.ajax/

关于javascript - 在谷歌地图上显示位置变化,无需一次又一次地重新加载 map ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32455957/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com