1

我有一个 mysql 表，其中包含一系列 lat/lng 点被写入 xml 文件并作为点导入谷歌地图。这似乎工作正常，但不是简单地用一个点标记它们，我想在它们之间生成一条折线。在查看开发人员文档时，我注意到该示例通过为每条线/点集创建一个新的 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/ 脚本将 XML 坐标调用到地图中：

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

developer.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);
}
});
}}
4

1 回答 1

0

知道了！在这里我在网上问，坐在我后面的孩子一直都知道......

我错误地设置了阵列。解决问题：----创建一个空数组----使用'.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-16T23:46:15.073 回答