我正在从mysql数据库中获取数据，并用箭头绘制多段线。但问题是地图没有显示任何箭头或折线。如果我把一些lat/long值直接放在点（lat，long）中，这是有效的。我认为在绘制价值观方面存在一些问题。这是我的代码，请告诉我哪里错了？？
这是我的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>
在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，但请稍候我们必须等待第一次加载贴图块，然后才能使用"head"选项所需的投影
var initLoad = g.event.addListener(map, "tilesloaded", function () {
g.event.removeListener(initLoad);
createPoly(liste_des_points, "head");
});