1

プロジェクトで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関数を使用してポリラインを描画できると思います。しかし、どのように？

4

2 に答える 2

5

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

この地図は、2 つの目的地間の真の最短ルートを示す曲線を描きます。直線だけが必要な場合は、geodesic 属性を false に設定します

于 2011-09-16T14:13:04.230 に答える
0

Gmap には、ポリラインのような形状を追加できるオーバーレイ拡張 (jquery.ui.map.overlays.js) があります。

以下に例を示します (avlMarkers は LatLng の配列です)。

var colour = '#0000FF';
var polyline = {
    path: avlMarkers,
    strokeColor: colour,
    strokeOpacity: 1.0,
    strokeWeight: 4
 };
 $('#map_canvas').gmap('addShape', 'Polyline', polyline);
于 2013-02-04T02:35:33.677 に答える