phpとajaxを使用してGoogleマップのマーカーを更新する

こんにちは私はデータベースに配置された座標を持つマップを含むWebページを開くためにコードを作成しました。そのデータベースの新しい座標の新しいマーカーで地図を自動更新します。ここPHPのコードです助けてくださいphpとajaxを使用してGoogleマップのマーカーを更新する

<?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>

出典

2016-06-21 nemo nemo

私はようやくそれをしました：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); 
 
\t \t \t \t \t \t \t marker = new google.maps.Marker({ 
 
          position: pt, 
 
\t \t \t \t \t \t \t draggable: true, 
 
\t \t \t \t \t \t \t raiseOnDrag: true, 
 
          icon: icon, 
 
          map: map 
 
         }); 
 
\t \t \t \t \t \t 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; 
 
         }); 
 
        } 
 
\t \t \t \t \t \t \t 
 
        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(){ 
 
\t 
 
\t \t \t \t $.ajax({ 
 
\t \t \t \t \t \t \t type: "POST", 
 
\t \t \t \t \t \t \t url: 'location.php', 
 
\t \t \t \t \t \t // data: form_data, 
 
\t \t \t \t \t \t \t success: function(data) 
 
\t \t \t \t \t \t \t { 
 
\t \t \t \t \t \t \t \t 
 
\t \t \t \t \t \t // var json_obj = $.parseJSON(data);//parse JSON 
 
\t \t \t \t \t \t \t \t var json_obj = jQuery.parseJSON(JSON.stringify(data)); 
 
\t \t \t \t \t \t \t \t for (var i in json_obj) 
 
\t \t \t \t \t \t \t \t { \t 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); 
 
\t \t \t \t \t \t \t \t 
 
\t \t \t \t \t \t \t \t } 
 
\t \t \t \t \t \t \t }, 
 
\t \t \t \t \t \t \t dataType: "json"//set to JSON  
 
\t \t \t \t \t \t })  
 
\t 
 
    
 
    },3000); 
 

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

 
    } 
 
    
 

 
    setInterval(function removeMarker() { 
 
    if (markersArray) { 
 
     for (i=0; i < markersArray.length; i++) { 
 
      markersArray[i].setMap(null); 
 
\t \t \t 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"); 
 
?>

に

出典

2016-12-16 17:25:21 Soykot

phpとajaxを使用してGoogleマップのマーカーを更新する

答えて

関連する問題