Question

我搜索了几天，但我没有找到解决方案。我目前正在开展一个项目，我需要从Arduino接收经度和高度等信息，将其保存在我的数据库中，然后使用谷歌地图将其打印到另一个页面。我目前在每10秒刷新一次地图标记时遇到问题而没有刷新所有页面。下面我粘贴我的代码副本，如果有人可以帮助我将非常感激

<script src="http://maps.google.com/maps/api/js?v=3&sensor=false" type="text/javascript"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.min.js"></script>

<script type="text/javascript">

var icon = new google.maps.MarkerImage("http://maps.google.com/mapfiles/ms/micons/blue.png",
new google.maps.Size(32, 32), new google.maps.Point(0, 0),
new google.maps.Point(16, 32));
var center = null;
var map = null;
var currentPopup;
var bounds = new google.maps.LatLngBounds();
function addMarker(lat, lng, info) {
    var pt = new google.maps.LatLng(lat, lng);
    bounds.extend(pt);
    var marker = new google.maps.Marker({
        position: pt,
        icon: icon,
        map: map
    });
}

function initMap() {
    map = new google.maps.Map(document.getElementById("map"), {
        center: new google.maps.LatLng(0, 0),
        zoom: 14,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        mapTypeControl: false,
        mapTypeControlOptions: {
            style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR
        },
        navigationControl: true,
        navigationControlOptions: {
            style: google.maps.NavigationControlStyle.SMALL
        }
    });

<?php
  $query = mysql_query("SELECT * FROM valori");
  while ($row = mysql_fetch_array($query)){
      $lat=$row['latitude'];
      $lon=$row['longitude'];
     echo ("addMarker($lat, $lon);\n");
  }
?>

    center = bounds.getCenter();
    map.fitBounds(bounds);
}

</script>

<body onload="initMap()" style="margin:0px; border:0px; padding:0px;">
<div id="map"></div>

Answer 1

如果要在不重新加载页面的情况下从数据库更新地图标记，则需要针对服务于更新（或新）地理位置的服务器端点/ API编写ajax调用。

我不知道你的服务器设置，但在客户端假设一个JSON API，这可能看起来像：

function fetch_markers() {
    $.getJSON("/api/locations/latest", {}, function(res) {
        if (res.locations) add_new_markers(res.locations);
    }
}

function add_new_markers(locations) {
    locations.forEach(function(loc, i) {
        var marker = new google.maps.Marker({
            map: map,
            position: new google.maps.LatLng(loc.latitude, loc.longitude),
            title: "marker title"
        });
    });
}

确保全局初始化地图变量，以便可以通过上述方法访问它。

您的API需要查询您的数据库并以如下格式返回结果：

{"locations": [
    {"latitude": X, "longitude": Y},
    {"latitude": X, "longitude": Y},
]}

最后，您可以通过设置间隔来设置每隔10秒调用fetch_markers：

window.setInterval(fetch_markers, 10*1000);

您需要考虑的其他事项是如何从数据库中获取位置。这样的应用程序可能需要存储最后一个获取时间戳并将其传递给服务器，以确保您只获取自上次获取以来添加的数据点。具体取决于您的要求。

Google地图刷新数据库

1 个答案: