Question

我有一个mysql表，其中一系列lat / lng点被写入xml文件并作为点导入谷歌地图。这似乎工作正常，但不是简单地用一个点标记它们，我想在它们之间生成折线。在查看developer docs时，我注意到该示例通过为每行/每组点创建一个新的latlng对象进行迭代。有没有办法可以动态调用一系列点来从我的数据库生成多行？对不起，如果这看起来像一个明显的解决方案 - 我对地图api有点新意。提前谢谢！

我正在使用的输出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 / Script将XML coords调用到地图中：

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

有关developers.google 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);
}
});
}}

Answer 1

知道了！我在这里问互联网，坐在我身后的那个孩子一直都知道......

我正在错误地设置数组。解决问题： ----创建一个空数组 ----使用'.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);
    });

}}

从多个mysql点创建谷歌地图折线

1 个答案: