Javascript 如何使用gMap和jQuery绘制多段线？

我想在我的项目中使用jQuery插件。我成功地显示了谷歌地图，我可以显示一些标记，但我找不到任何方法来绘制多段线

我有这个JS代码：

$(window).ready(function () {
  var data = {
    'latitude': 0.000000,
    'longitude': -180.000000,
    'zoom': 3,
    'maptype': "terrain",
  };
  var gps_coordinates = {
    strokeColor: "#FF0000",
    strokeOpacity: 1.0,
    strokeWeight: 2,
    path: [
      {'latitude':37.772323,'longitude':-122.214897},
      {'latitude':21.291982,'longitude':-157.821856},
      {'latitude':-18.142599,'longitude':178.431000},
      {'latitude':-27.467580,'longitude':153.027892}
    ]
  };

  $('#map').gMap(data);
  $('#map').gMap("Polyline", gps_coordinates);
});

本说明如下：

您还可以使用一些内部gmap功能

---

所以我想，我可以使用

google.maps.Polyline

函数来绘制多段线。但是怎么做呢？

我不熟悉gMap插件。但是，如果我只是使用Google Maps API 3进行此操作，我会这样做：

var homeLatlng= new google.maps.LatLng(0, -180);

var myOptions = {
    zoom: 3,
    center: homeLatlng,
    mapTypeId: google.maps.MapTypeId.TERRAIN
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

var pathLatLng;

var paths = [
      {'latitude':37.772323,'longitude':-122.214897},
      {'latitude':21.291982,'longitude':-157.821856},
      {'latitude':-18.142599,'longitude':178.431000},
      {'latitude':-27.467580,'longitude':153.027892}
    ];

for (var i = 0; i < paths.length; i++) {
    pathLatLng = new google.maps.LatLng(paths[i].latitude, paths[i].longitude);

    path = new google.maps.Polyline({
        path: [homeLatlng, pathLatLng],
        strokeColor: "##FF0000",
        strokeOpacity: 1.0,
        strokeWeight: 2,
        geodesic: true,
        map: map
    });
}

var homeLatlng=new google.maps.LatLng（0，-180）；
变量myOptions={
缩放：3，
中心：家庭式，
mapTypeId:google.maps.mapTypeId.TERRAIN
};
var map=new google.maps.map（document.getElementById（“map_canvas”），myOptions）；
var pathLatLng；
变量路径=[
{‘纬度’：37.772323，‘经度’：-122.214897}，
{“纬度”：21.291982，“经度”：-157.821856}，
{“纬度”：-18.142599，“经度”：178.431000}，
{‘纬度’：-27.467580，‘经度’：153.027892}
];
对于（var i=0；i

---

这张地图画了曲线，表示两个目的地之间真正的最短路线。如果您只想要直线，请将测地线属性设置为false

我不熟悉gMap插件。但是，如果我只是使用Google Maps API 3进行此操作，我会这样做：

var homeLatlng= new google.maps.LatLng(0, -180);

var myOptions = {
    zoom: 3,
    center: homeLatlng,
    mapTypeId: google.maps.MapTypeId.TERRAIN
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

var pathLatLng;

var paths = [
      {'latitude':37.772323,'longitude':-122.214897},
      {'latitude':21.291982,'longitude':-157.821856},
      {'latitude':-18.142599,'longitude':178.431000},
      {'latitude':-27.467580,'longitude':153.027892}
    ];

for (var i = 0; i < paths.length; i++) {
    pathLatLng = new google.maps.LatLng(paths[i].latitude, paths[i].longitude);

    path = new google.maps.Polyline({
        path: [homeLatlng, pathLatLng],
        strokeColor: "##FF0000",
        strokeOpacity: 1.0,
        strokeWeight: 2,
        geodesic: true,
        map: map
    });
}

var homeLatlng=new google.maps.LatLng（0，-180）；
变量myOptions={
缩放：3，
中心：家庭式，
mapTypeId:google.maps.mapTypeId.TERRAIN
};
var map=new google.maps.map（document.getElementById（“map_canvas”），myOptions）；
var pathLatLng；
变量路径=[
{‘纬度’：37.772323，‘经度’：-122.214897}，
{“纬度”：21.291982，“经度”：-157.821856}，
{“纬度”：-18.142599，“经度”：178.431000}，
{‘纬度’：-27.467580，‘经度’：153.027892}
];
对于（var i=0；i

---

这张地图画了曲线，表示两个目的地之间真正的最短路线。如果您只想要直线，请将测地线属性设置为false

Gmap有一个覆盖扩展名（jquery.ui.map.overlays.js），它允许您添加多段线等形状

以下是一个示例（avlMarkers是一组LatLng）：

---

Gmap有一个覆盖扩展（jquery.ui.map.overlays.js），允许您添加多段线等形状

以下是一个示例（avlMarkers是一组LatLng）：

---

另外，在我看来，你混淆了纬度（在+90到-90之间）和经度（在+180到-180之间）。用您的数据测试我的代码会得到奇怪的结果。在路径数组中切换纬度和经度看起来更好：-）是的，你是对的。我在密码上犯了一个错误。我会修好的。谢谢。而且在我看来，你混淆了纬度（在+90到-90之间）和经度（在+180到-180之间）。用您的数据测试我的代码会得到奇怪的结果。在路径数组中切换纬度和经度看起来更好：-）是的，你是对的。我在密码上犯了一个错误。我会修好的。谢谢，谢谢。最后，我使用了你的代码，而不是gMap插件。看起来gMap只是为了显示地图和标记而创建的。谷歌地图API非常简单，我不确定gMap是否能为大多数人带来任何真正的好处。谢谢。最后，我使用了你的代码，而不是gMap插件。看起来gMap只是为了显示地图和标记而创建的。谷歌地图API如此简单，我不确定gMap是否能为大多数人带来任何真正的好处。