在Google地图上移动标记

Question

我正在做一个跟踪系统。 我使用codeigniter框架和mongodb连接。 另外我正在使用Google map javascript api v3加载地图。 我能够在地图上加载标记。但是当数据从数据库加载时，我不知道如何移动标记。我读过，我必须使用AJAX来做到这一点，但不知道。我跟着this link加载标记。

任何帮助将不胜感激。

Answer 1

Google地图的代码不会有任何变化，让我给你一个简单的例子。

function initialize() { 
    var map; 
    var bounds = new google.maps.LatLngBounds(); 
    var mapOptions = { 
     mapTypeId: 'roadmap' 
    }; 

    // Display a map on the page 
    map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions); 

    // Multiple Markers 
    var markers = [ 
     ['London Eye, London', 51.503454,-0.119562], 
     ['Palace of Westminster, London', 51.499633,-0.124755] 
    ]; 

    // Info Window Content 
    var infoWindowContent = [ 
     ['<div class="info_content">' + 
     '<h3>London Eye</h3>' + 
     '<p>The London Eye is a giant Ferris wheel situated on the banks of the River Thames. The entire structure is 135 metres (443 ft) tall and the wheel has a diameter of 120 metres (394 ft).</p>' +  '</div>'], 
     ['<div class="info_content">' + 
     '<h3>Palace of Westminster</h3>' + 
     '<p>The Palace of Westminster is the meeting place of the House of Commons and the House of Lords, the two houses of the Parliament of the United Kingdom. Commonly known as the Houses of Parliament after its tenants.</p>' + 
     '</div>'] 
    ]; 

    // Display multiple markers on a map 
    var infoWindow = new google.maps.InfoWindow(), marker, i; 

    // Loop through our array of markers & place each one on the map 
    for(i = 0; i < markers.length; i++) { 
     var position = new google.maps.LatLng(markers[i][1], markers[i][2]); 
     bounds.extend(position); 
     marker = new google.maps.Marker({ 
      position: position, 
      map: map, 
      title: markers[i][0] 
     }); 

     // Allow each marker to have an info window  
     google.maps.event.addListener(marker, 'click', (function(marker, i) { 
      return function() { 
       infoWindow.setContent(infoWindowContent[i][0]); 
       infoWindow.open(map, marker); 
      } 
     })(marker, i)); 

     // Automatically center the map fitting all markers on the screen 
     map.fitBounds(bounds); 
    } 

    // Override our map zoom level once our fitBounds function runs (Make sure it only runs once) 
    var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function(event) { 
     this.setZoom(14); 
     google.maps.event.removeListener(boundsListener); 
    }); 

} 

所以你只需要你从数据库中获取的值替换标记数组中的值，所有标记会被吸引。

你需要做的是从PHP数据库中获取数据。

<?php 

     #code to fetch data from database 
     #store results in array 

     $lat_long_values = array 
           (
            array('London Eye, London', 51.503454,-0.119562), 
            array('Palace of Westminster, London', 51.499633,-0.124755), 
          ); 
?> 

假设你在数组中有这样的值。现在在JavaScript中使用此数组中的值。因此标记现在会变成，

var markers = <?php echo $lat_long_values; ?>

编辑

那么在这种情况下，我建议你使用的

而且JavaScript setInterval method

setInterval(function(){ 


    $.get("YOUR_PHP_PAGE", function(data) { 
     //Do what you want with data 
     alert(data); 
    }); 


}, 3000); 

组合

您可以看到，我在3秒（3000毫秒）后调用JS函数，并且调用PHP函数从数据库获取最新值。

你可以应用这个技巧来完成它。

Answer 2

这里是你想要的代码..

$query = "select * from table"; 
$result= mysql_query($query); 
$lat[] = array(); 
$lng[]=array(); 
$x=0; 
while($rows=mysql_fetch_array($result)) 
{ 
    $lat[$x]=$rows['X']; 
    $lng[$x]=$rows['Y']; 
    $x++; 

}//here is your connection in db 

var markersdata=[]; 
function dd() 
{ 

    latLocation =<?php echo json_encode($lat); ?>; 
    lngLocation =<?php echo json_encode($lng); ?>; 

      for (var i = 0; i < latLocation.length; i++) { 
     // 

        makeMarker(latLoc[i],lngLoc[i]); 


      } 

} 
funtion makeMarker(lati, longi) 
{ 

    var markerOptions = {map: map, position: new google.maps.LatLng(lati, longi)};` 
    var marker = new google.maps.Marker(markerOptions);` 

} 
//this code is working. leave comment if you have any question