從多個mysql點創建谷歌地圖多段線

我有一個MySQL表，有一系列經緯度寫入xml文件並導入到Google地圖中作爲點。這似乎工作正常，但不是簡單地用一個點標記它們，我想在它們之間生成折線。在查看developer docs時，我注意到該示例通過爲每行/一組點創建新的latlng對象進行迭代。有沒有一種方法可以動態地調用一系列點來從我的數據庫中生成多行？對不起，如果這看起來像一個明顯的修復 - 我對地圖API有點新。提前致謝！從多個mysql點創建谷歌地圖多段線

我使用看起來輸出的XML文件是這樣的：

Location name="2012-04-01 12:28:18" lat="42.9523010667" lon="-78.8189444333"/ 
Location name="2012-04-01 12:28:06" lat="42.95219345" lon="-78.81931905"/ 
Location name="2012-04-01 12:27:54" lat="42.9522356" lon="-78.8192848667"/..... etc

HTML /腳本調用XML COORDS到地圖：在developers.google問題

function load() { 
    if (GBrowserIsCompatible()) { 
    var map = new GMap2(document.getElementById("map")); 
    map.addControl(new GSmallMapControl()); 
    map.addControl(new GMapTypeControl()); 
    map.setCenter(new GLatLng(42.9521, -78.8198), 20); 

    GDownloadUrl("gmaps_genxml2.php", function(data) { 
     var xml = GXml.parse(data); 
     var markers = xml.documentElement.getElementsByTagName("Location"); 
     for (var i = 0; i < markers.length; i++) { 
     var name = markers[i].getAttribute("timestamp"); 
     var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")), 
           parseFloat(markers[i].getAttribute("lon"))); 
     var marker = createMarker(point, name); 
     map.addOverlay(marker); 
     } 
    });

代碼段DOC：

var flightPlanCoordinates = [ 
new google.maps.LatLng(37.772323, -122.214897), 
new google.maps.LatLng(21.291982, -157.821856), 
new google.maps.LatLng(-18.142599, 178.431), 
new google.maps.LatLng(-27.46758, 153.027892)]; 
    var flightPath = new google.maps.Polyline({ 
path: flightPlanCoordinates, 
strokeColor: "#FF0000", 
strokeOpacity: 1.0, 
strokeWeight: 2}); 

    flightPath.setMap(map);}}} 

function createMarker(point, name) { 
    var marker = new GMarker(point, customIcons[type]); 
    var html = "<b>" + name; 
    GEvent.addListener(marker, 'click', function() { 
    marker.openInfoWindowHtml(html); 
    }); 

    return marker; 
}

我目前沒有顯示在控制檯中的任何錯誤。這是我試圖從原始文章實現前兩個代碼片段的方式，但我沒有讓地圖顯示任何行/點。可能是我定義點變量的方式/它不是存儲數組，而是單點？我在定義「點」的良好使用[]嘗試，但並沒有工作/沒有表現出任何差錯要麼...

function load() { 
if (GBrowserIsCompatible()) { 
// Create an instance of Google map 
var map = new GMap2(document.getElementById("map")); 
// Tell the map where to start 
map.setCenter(new GLatLng(42.9521, -78.8198), 20); 

GDownloadUrl("gmaps_genxml2.php", function(data) { 
var xml = GXml.parse(data); 
var markers = xml.documentElement.getElementsByTagName("Location"); 
for (var i = 0; i < markers.length; i++) { 
var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")), parseFloat(markers[i].getAttribute("lon"))); 
var polyline = new GPolyline(point, '#ff0000', 5, 0.7); 
map.addOverlay(polyline); 
} 
}); 
}}

來源

2012-04-16 user1336528

是否有在控制檯日誌中的任何錯誤？如果是這樣，給他們看！ – SativaNL 2012-04-16 15:21:52

控制檯中沒有錯誤 - 請參閱編輯過的帖子以獲取詳細信息。謝謝！ – user1336528 2012-04-16 20:57:48

你可以製作一個JSFiddle，以便我可以嘗試和調試嗎？ – SativaNL 2012-04-16 20:59:11

明白了！在這裏，我問了互聯網，和坐在我身後的孩子知道整個時間...

我錯誤地設置了數組。爲了解決這個問題： ----創建一個空數組 ----用「.push」插入到陣列

function load() { 

    if (GBrowserIsCompatible()) { 
// Create an instance of Google map 
var map = new GMap2(document.getElementById("map")); 

// Tell the map where to start 
map.setCenter(new GLatLng(42.9521, -78.8198), 20); 





GDownloadUrl("gmaps_genxml2.php", function(data) { 
     var xml = GXml.parse(data); 
     var markers = xml.documentElement.getElementsByTagName("Location"); 
     var points = []; 
     for (var i = 0; i < markers.length; i++) { 

     points.push(new GLatLng(parseFloat(markers[i].getAttribute("lat")), parseFloat(markers[i].getAttribute("lon")))); 
     } 
     var polyline = new GPolyline(points, '#ff0000', 5, 0.7); 
     map.addOverlay(polyline); 
    }); 

}}

來源

2012-04-16 23:46:15 user1336528

從多個mysql點創建谷歌地圖多段線

回答

相關問題