如何使用gMap和jQuery绘制折线？

Question

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

我有这个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文档中的注释如下：

您还可以使用一些内部gmap函数。

所以我想，我可以使用google.maps.Polyline函数绘制一条折线。但是如何？

Answer 1

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

该地图绘制了表示两个目的地之间最短路线的曲线。如果只需要直线，请将geodesic属性设置为false