php - 使用 PHP 和 MYSQL 的 Google map

Question

我正在从 mysql 数据库获取数据并用箭头绘制折线。但问题是 map 没有显示任何箭头或多段线。如果我直接将一些纬度/经度值放入点(纬度，经度)中，它就可以工作。我认为绘制值时存在一些问题。这是我的代码请告诉我哪里错了？

这是我的 php 部分:

 // 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);

?>

这是我的 JS 部分

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

Answer 1

在 window.onload 函数中，将“while”循环更改为以下内容:

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

然后立即调用 createPoly 函数，将其传递给 liste_des_points，但是我们必须等待 map 图 block 第一次加载，然后才能使用“head”选项所需的投影

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