如何使用数据库查询重新加载地图?

时间:2014-08-12 16:44:56

标签: php mysql

<html lang="fr">
<head>
<link rel="stylesheet" media="screen" type="text/css" title="Exemple" href="theme.css"/>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta charset="UTF-8" />
    <title>Geonano V1</title>
    <style type="text/css">
        html{height: 100%}
        body{height: 100%; margin: 0px; padding: 0px}
        #EmplacementDeMaCarte{height: 100%}
    </style>
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript">
        function initialisation() {
            var tableauLieux = [ 
//here I have a loop in php to get my markers in my database

["Paris",     60, 2.34459],
["Versailles",     48.78199, 2.11045]


            ];
            var optionsCarte = {
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var maCarte = new google.maps.Map(document.getElementById("EmplacementDeMaCarte"), optionsCarte);
            var bounds = new google.maps.LatLngBounds();
            for (var i = 0; i < tableauLieux.length; i++) {
                var Lieu = tableauLieux[i];
                var pointLieu = new google.maps.LatLng(Lieu[1], Lieu[2]);
                bounds.extend(pointLieu);
                var marqueurLieu = new google.maps.Marker({
                    position: pointLieu,
                    map: maCarte,
                    title: Lieu[0],
                    icon : Lieu[3],
                    clickable: true

                });
                //création de l'info-bulle
                var infoBulle = new google.maps.InfoWindow({
                content: Lieu[0]//ici on peut mettre des balises HTML
                });
            google.maps.event.addListener(marqueurLieu, 'click', function() {
        infowindow.setContent(Lieu[i][0]);
        infoBulle .open(maCarte,marqueurLieu);
        }); 
            }

            maCarte.fitBounds(bounds);
        }

        google.maps.event.addDomListener(window, 'load', initialisation);
        setInterval("initialisation()", 50000); 
    </script>
</head>

<body>
    <div id="EmplacementDeMaCarte"></div>



</body>
<META HTTP-EQUIV="Refresh" CONTENT="120; URL=http://localhost/geonano.php">
</html>

这是我的代码。我的页面重新加载成功重新加载。有数据巴黎和凡尔赛。我想从表名gpstable获取数据。该表如下所示

id     | username  | password  | fullname |      paris   |     versailles
1      |   test    |  test2    | test12   |    23.26     |       90.37

如何从数据库中获取此数据。请帮忙

1 个答案:

答案 0 :(得分:0)

创建更好的数据库方案。例如:

    id, name, lon, lat 

读出您的数据库(例如使用mysql)并将其推送到json webserver

    $con = mysqli_connect("localhost","my_user","my_password","my_db");
    $tsql = mysqli_query($con,"SELECT * FROM markers");
    $results = mysqli_fetch_assoc($tsql);

将结果转换为JSON

$json = json_encode($results);

使用jquery读取标记(例如,单击刷新按钮)

$.getJSON('/example.php', { get_param: 'value' }, function(data) {
    $.each(data, function(index, element) {

        // here you find all data from your markers

        }));
    });
});

您应该创建一个全局标记数组,用于存储地图上的所有标记。例如:

var markers = [];

如果添加任何标记,请将其推送到标记数组

function addMarker(location) {
  var marker = new google.maps.Marker({
    position: location,
    map: map
  });
  markers.push(marker);
}

在刷新之前,请始终从地图中删除所有标记

// Sets the map on all markers in the array.
function clearAllMarkers(map) {
  for (var i = 0; i < markers.length; i++) {
    markers[i].setMap(null);
  }
}

添加新的

function setNewMarkers(map) {
  for (var i = 0; i < markers.length; i++) {
    markers[i].setMap(map);
  }
}

mysql的信息:

http://www.pontikis.net/blog/how-to-use-php-improved-mysqli-extension-and-why-you-should

使用谷歌地图v3 api的信息:

https://developers.google.com/maps/?hl=fr