Google maps with PHP & MYSQL

问题

i am getting data from mysql database and draw the polylines with arrows. but the problem is that map is not showing any arrow or poly line. it is working if i put some lat/long values directly in points(lat,Long). i think there is some problem in plotting the values. here is my code please tell me where i am wrong??

this is my php part:

 // Connect to server and select database.
 $conn = mysqli_connect("$host", "$username", "$password","$db_name")or die("cannot connect");
 if (mysqli_connect_errno($conn))
  {
 echo "Failed to connect to MySQL: " . mysqli_connect_error();
  }

$listeDesPoints=''; 
// Perform queries
$result = mysqli_query($conn,"SELECT Latitude, Longitude FROM gprs where DeviceId=29")

or die('could not open Database');      

while($row = mysqli_fetch_assoc($result))
 {
  if($listeDesPoints!='') $listeDesPoints.=','; 
  $listeDesPoints.='['.$row['Latitude'].','.$row['Longitude'].']';

  }
mysqli_close($conn);

?>

and this my JS part

<script type="text/javascript">

 var map, setArrows;

 function ArrowHandler() {
 this.setMap(map);
 // Markers with 'head' arrows must be stored
 this.arrowheads = [];
 }
 // Extends OverlayView from the Maps API
 ArrowHandler.prototype = new google.maps.OverlayView();

 // Draw is inter alia called on zoom change events.
 // So we can use the draw method as zoom change listener
 ArrowHandler.prototype.draw = function() {

 if (this.arrowheads.length > 0) {
 for (var i = 0, m; m = this.arrowheads[i]; i++) {
 m.setOptions({ position: this.usePixelOffset(m.p1, m.p2) });
 }
 }
 };

 // Computes the length of a polyline in pixels
 // to adjust the position of the 'head' arrow
 ArrowHandler.prototype.usePixelOffset = function(p1, p2) {

 var proj = this.getProjection();
 var g = google.maps;
 var dist = 12; // Half size of triangle icon

 var pix1 = proj.fromLatLngToContainerPixel(p1);
 var pix2 = proj.fromLatLngToContainerPixel(p2);
 var vector = new g.Point(pix2.x - pix1.x, pix2.y - pix1.y);
 var length = Math.sqrt(vector.x * vector.x + vector.y * vector.y);
 var normal = new g.Point(vector.x/length, vector.y/length);
 var offset = new g.Point(pix2.x - dist * normal.x, pix2.y - dist * normal.y);

 return proj.fromContainerPixelToLatLng(offset);
 };

 // Returns the triangle icon object
 ArrowHandler.prototype.addIcon = function(file) {
 var g = google.maps;
 var icon = { url: "http://www.google.com/mapfiles/" + file,
 size: new g.Size(24, 24), anchor: new g.Point(12, 12) };
 return icon;
 };

 // Creates markers with corresponding triangle icons
 ArrowHandler.prototype.create = function(p1, p2, mode) {
 var markerpos;
 var g = google.maps;
 if (mode == "onset") markerpos = p1;
 else if (mode == "head") markerpos = this.usePixelOffset(p1, p2);
 else if (mode == "midline") markerpos = g.geometry.spherical.interpolate(p1, p2, .5);

 // Compute the bearing of the line in degrees
 var dir = g.geometry.spherical.computeHeading(p1, p2).toFixed(1);
  // round it to a multiple of 3 and correct unusable numbers
  dir = Math.round(dir/3) * 3;
  if (dir < 0) dir += 240;
   if (dir > 117) dir -= 120;
  // use the corresponding icon

    var icon = this.addIcon("dir_" +dir+ ".png");

    var marker = new g.Marker({position: markerpos,
    map: map, icon: icon, clickable: false
    });

   if (mode == "head") {
  // Store markers with 'head' arrows to adjust their offset position on zoom change
   marker.p1 = p1;
   marker.p2 = p2;
   marker.setValues({ p1: p1, p2: p2 });
   this.arrowheads.push(marker);
   }
   };

  ArrowHandler.prototype.load = function (points, mode) {
  for (var i = 0; i < points.length-1; i++) {
   var p1 = points[i],
  p2 = points[i + 1];
  this.create(p1, p2, mode); 
  }
  };

  // Draws a polyline with accordant arrow heads
 function createPoly(path, mode) {
  var poly = new google.maps.Polyline({
  strokeColor: "#000fff",
  strokeOpacity: 0.5,
  strokeWeight: 4,
  map: map,
  path: path });

  setArrows.load(path, mode);
  return poly;
  }

  // Create the map
  window.onload = function() {

  var g = google.maps;
  var center = new g.LatLng(35.6094, 78.9400);
  var opts_map = {
  center: center, zoom: 13,
  streetViewControl: false,
  mapTypeId: "roadmap" // g.MapTypeId.ROADMAP
  };
  map = new g.Map(document.getElementById("map"), opts_map);

 var liste_des_points=[<?php echo $listeDesPoints; ?>];

 setArrows = new ArrowHandler();
 var i=0,li=liste_des_points.length;
  while(i<li){
  var points = new google.maps.LatLng(liste_des_points[i][0], liste_des_points[i][1]);

  createPoly(points, "onset");
  i++;
  }

  g.event.addListenerOnce(map, "tilesloaded", function() {

  });
   };


 </script>

回答1:

Within your window.onload function, change your 'while' loop to the following:

while (i < li) {
    liste_des_points[i] = new google.maps.LatLng(liste_des_points[i][0], liste_des_points[i][1]);
    i++;
}

then immediately after that, call the createPoly function, passing it liste_des_points, but wait we must wait the first time for the map tiles to load before we can use the projection required for the 'head' option

var initLoad = g.event.addListener(map, "tilesloaded", function () {
    g.event.removeListener(initLoad);
    createPoly(liste_des_points, "head");
});

来源：https://stackoverflow.com/questions/20179488/google-maps-with-php-mysql