Google地图与PHP& MYSQL [英] Google maps with PHP & MYSQL

问题描述

我从mysql数据库获取数据并用箭头绘制多段线。但问题是地图没有显示任何箭头或多边形线。它正在工作，如果我把一些纬度/长期值直接在点（纬度，长）。我认为在绘制价值观时存在一些问题。这里是我的代码，请告诉我我错在哪里？

这是我的php部分：

  //连接到服务器并选择数据库。 
 $ conn = mysqli_connect（$ host，$ username，$ password，$ db_name）或die（无法连接）; 
 if（mysqli_connect_errno（$ conn））
 {
 echo无法连接到MySQL：。 mysqli_connect_error（）; 
} 
 
 $ listeDesPoints =''; 
 //执行查询
 $ result = mysqli_query（$ conn，SELECT Latitude，Longitude FROM gprs where DeviceId = 29）
 
或者die（'无法打开数据库' ）; 
 $ b $ 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; 
 
函数ArrowHandler（）{
 this.setMap（map）; 
 //带有'head'箭头的标记必须存储
 this.arrowheads = []; 
} 
 //从Maps API扩展OverlayView 
 ArrowHandler.prototype = new google.maps.OverlayView（）; 
 
 //绘图尤其被称为缩放变化事件。 
 //所以我们可以使用draw方法作为缩放更改监听器
 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）} ）; 
} 
} 
}; 
 
 //以像素为单位计算多段线的长度
 //调整'head'箭头的位置
 ArrowHandler.prototype.usePixelOffset = function（p1，p2） {
 
 var proj = this.getProjection（）; 
 var g = google.maps; 
 var dist = 12; //三角图标的一半大小
 
 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）; 
}; 
 
 //返回三角图标对象
 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）}; 
返回图标; 
}; 
 
 //用相应的三角形图标创建标记
 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）; 
 
 //以度为单位计算线的方位
 var dir = g.geometry.spherical.computeHeading（p1，p2）.toFixed（1）; 
 //将其舍入到3的倍数并校正不可用的数字
 dir = Math.round（dir / 3）* 3; 
 if（dir <0）dir + = 240; 
 if（dir> 117）dir  -  = 120; 
 //使用相应的图标
 
 var icon = this.addIcon（dir_+ dir +.png）; 
 
 var marker = new g.Marker（{position：markerpos，
 map：map，icon：icon，clickable：false 
}）; 
 
 if（mode ==head）{
 //使用'head'箭头存储标记以调整变焦时的偏移位置
 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 =分[i]，
 p2 =分[i + 1]; 
 this.create（p1，p2，mode）; 
} 
}; 
 
 //绘制带有一致的箭头的多段线
 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; 
} 
 
 //创建地图
 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> 
  

解决方案

在你的window.onload函数中，改变'while '循环如下：

pre $ 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，我们必须等待第一次加载地图图块，然后才能使用'head'选项所需的投影。

  var initLoad = g.event.addListener（map，tilesloaded，function（）{
 g.event.removeListener（initLoad）; 
 createPoly（liste_des_points，head）; 
}） ; 
  

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>

解决方案

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");
});

这篇关于Google地图与PHP& MYSQL的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！