使用 php 和 ajax 更新谷歌地图上的标记答案

【问题标题】：update markers on google maps using php and ajax使用 php 和 ajax 更新谷歌地图上的标记
【发布时间】：2016-06-21 21:15:19
【问题描述】：

您好，我编写了一个代码来打开一个网页，该网页包含带有放置在数据库中的坐标的地图我想使用来自该数据库的新坐标的新标记自动更新地图这是php中的代码，请帮助我

<?php

// read data 
$account =mysql_connect("localhost","username","password")
or die(mysql_error());

mysql_select_db("first",$account);

$sql ="SELECT * FROM test";

$result=mysql_query($sql,$account);
while($row=mysql_fetch_array($result)){
$Lo=$row['one'];
$Lat=$row['two'];


}
echo $Lo.'and '.$Lat.'<br>';
?>

<!DOCTYPE html>
<html>
<head>
<script
src="http://maps.googleapis.com/maps/api/js">
</script>

<script>

var myCenter=new google.maps.LatLng('<?php echo $Lo; ?>','<?php echo $Lat; ?>');

function initialize()
{
var mapProp = {
  center:myCenter,
  zoom:9,
  mapTypeId:google.maps.MapTypeId.ROADMAP
  };

var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);

var marker=new google.maps.Marker({
  position:myCenter,
  });

marker.setMap(map);
}

google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>

<body>
<div id="googleMap" style="width:500px;height:380px;"></div>
</body>
   </html>

【问题讨论】：

标签： php ajax google-maps

【解决方案1】：

所以我终于做到了：D。在帮助形成各种不同的来源和所有！这里是完整的代码：

<?php
error_reporting(E_ALL ^ E_DEPRECATED);

$conn = mysql_connect("localhost", "root", "") or die(mysql_error());
mysql_select_db("vsms3") or die(mysql_error());
?>

<html>
<head>
 <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Google Maps</title>

<!-------- Customizable Css for Map  ----------------------------->
    <style type="text/css">
        body { font: normal 10pt Helvetica, Arial; }
        #map { width: 500px; height: 300px; border: 0px; padding: 0px; }
    </style>

    <!---------------- Java Scripts for Map  ----------------->
   <script type="text/javascript" src="http://maps.google.com/maps/api/js?key=AIzaSyDzaa4MZ7r4s26i54PwErpKTynKAaWVxTc&v=3&language=en"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" ></script>
    <!------------- Java Scripts for Map  ------------------->
    <script type="text/javascript">
var marker;
var map = null;
var markersArray = [];

    //--------------------- Sample code written by vIr ------------
    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 currentPopup;
                    var bounds = new google.maps.LatLngBounds();
                    function addMarker(lat, lng, info) {
                        var pt = new google.maps.LatLng(lat, lng);
                        bounds.extend(pt);
							marker = new google.maps.Marker({
                            position: pt,
							draggable: true,
							raiseOnDrag: true,
                            icon: icon,
                            map: map
                        });
						 markersArray.push(marker);
                        var popup = new google.maps.InfoWindow({
                            content: info,
                            maxWidth: 300
                        });
                        google.maps.event.addListener(marker, "click", function() {
                            if (currentPopup != null) {
                                currentPopup.close();
                                currentPopup = null;
                            }
                            popup.open(map, marker);
                            currentPopup = popup;
                        });
                        google.maps.event.addListener(popup, "closeclick", function() {
                            map.panTo(center);
                            currentPopup = null;
                        });
                    }
							 
                    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: true,
                            mapTypeControlOptions: {
                                style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR
                            },
                            navigationControl: true,
                            navigationControlOptions: {
                                style: google.maps.NavigationControlStyle.ZOOM_PAN
                            }
                        });
   

  setInterval(function mapload(){
	
				$.ajax({
							type: "POST", 
							url: 'location.php',
						   // data: form_data,
							success: function(data)
							{
								
						   // var json_obj = $.parseJSON(data);//parse JSON
								var json_obj = jQuery.parseJSON(JSON.stringify(data));
								for (var i in json_obj) 
								{	addMarker(json_obj[i].u_lat, json_obj[i].u_lon,"Longitude:" + json_obj[i].u_lon + "<br>" + json_obj[i].u_email + "<br>" + json_obj[i].u_name);
								
								}
							},
							dataType: "json"//set to JSON    
						})    
	
   
  },3000);

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

   }
  

    setInterval(function removeMarker() {
    if (markersArray) {
        for (i=0; i < markersArray.length; i++) {
            markersArray[i].setMap(null);
			 marker=null;
        }
    markersArray.length = 0;
    }
},3000);
   </script>

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

和数据库相关的页面：

<?php

$conn = mysql_connect("localhost", "root", "") or die(mysql_error());
mysql_select_db("vsms3") or die(mysql_error());
$data = array();
$result = mysql_query("SELECT * FROM users")or die(mysql_error());
  while ($row = mysql_fetch_assoc($result)) {
    $data[] = $row;
}

echo json_encode($data);

   //echo("addMarker($lat, $lon, '<b>$name</b><br />$desc');\n");
?>

【讨论】：