谷歌地图刷新数据库中的标记答案

【问题标题】：Google maps refresh markers from database谷歌地图刷新数据库中的标记
【发布时间】：2016-06-05 17:15:37
【问题描述】：

我搜索了几天，但没有找到解决方案。我目前正在做一个项目，我需要从 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>

【问题讨论】：

标签： javascript google-maps google-maps-api-3 arduino maps

【解决方案1】：

如果您想在不重新加载页面的情况下从 DB 更新地图标记，则需要针对服务于更新（或新）地理点的服务器端点/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},
]}

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

window.setInterval(fetch_markers, 10*1000);

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

【讨论】：

谢谢，杰里米，我现在正在根据您的建议工作！再次感谢您的有用帮助