Я получаю данные из базы данных 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>в<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"); });