Question

你好我创建了一个代码来打开一个网页，其中包含放置在数据库中的坐标的地图我想用该数据库中新坐标的新标记自动更新地图这是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>

Answer 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");
?>

使用php和ajax在谷歌地图上更新标记

1 个答案: