1

ポリラインはすでにマップに描かれていますが、どのようにマーカーを配置できますか？

現在のコード：

map = new google.maps.Map(document.getElementById("map-canvas-tour"), mapOptions);

loadShowDates();

var polyFutureOptions = {
    path: pathFutureCoordinates,
    strokeColor: '#0000FF',
    strokeOpacity: 0.8,
    strokeWeight: 2.5
};

var polyPastOptions = {
    path: pathPastCoordinates,
    strokeColor: '#FF0000',
    strokeOpacity: 0.6,
    strokeWeight: 2.5
};

pathPast = new google.maps.Polyline(polyPastOptions);
pathFuture = new google.maps.Polyline(polyFutureOptions);
pathPast.setMap(map);
pathFuture.setMap(map);
infowindow = new google.maps.InfoWindow();
map.fitBounds(bounds);

pathFutureCoordinatesとpathPastCoordinatesの2つのポイントのセットがあり、これらはすべてツアールート（ポリライン）上の過去のギグと将来のギグを指します。マーカーの各セットは異なる色である可能性があります。

これを行うために何を使用しますか？

他のヒントはありますか？カスタムマーカーが理想的です。

問題のサイトページ：http：//goo.gl/H995E

4

1 に答える 1

2

これは、単一のポリラインを延長する（マップをクリックする）か、ポリラインのスポットをクリックするとマーカーがポリラインに追加されるようにマーカーが配置されているページです。新しいマーカーをドラッグして線がセグメントを調整するのを確認することで、新しいマーカーが正しく配置されたかどうかを確認できます。

https://files.nyu.edu/hc742/public/googlemaps/distance2.html

クリックしてラインに新しいマーカーを追加する予定があるかどうかはわかりません。上のページで、クリックによってマーカーが追加される方法について説明します。LatLngのリストを事前に作成しておくと、はるかに簡単になります（以下の手順3と4のみが必要です）。

  1. 線のクリックを検出するリスナーを追加します（線はクリックを容易にするために太くなります）
  2. 線のどのセグメントがクリックされたかを把握します
  3. マーカーをマーカーの配列に追加し、正しい位置に配置します（順序、新しいマーカーがマーカーを囲んでいるマーカーに基づく）
  4. マーカーLatLngsの新しい配列を使用して線を再描画します。

クリックリスナーが行に追加されます。

  google.maps.event.addListener(line, 'click', function(event) {
      for (var i = 0 ; i < markers.length - 1; i++) {
        if(isPointOnSegment(markers[i].getPosition(),
           markers[i+1].getPosition(),event.latLng)) {
          addMarker(event.latLng, i+1);
          break;
        } 
      }
    });
  }

クリックされたセグメントを知る必要があるため、ヘルパー関数が呼び出されます（isPointOnSegment）

  function isPointOnSegment(gpsPoint1, gpsPoint2, gpsPoint ){

    //Provided by Engineer
    // http://stackoverflow.com/questions/10018003/which-segment-of-a-polyline-was-clicked
    // 1st version, ignores perfectly horiz and vert. lines
    var p1 = map.getProjection().fromLatLngToPoint( gpsPoint1 );
    var p2 = map.getProjection().fromLatLngToPoint( gpsPoint2 );
    var p = map.getProjection().fromLatLngToPoint( gpsPoint );

    var t_x = (p.x - p1.x)/(p2.x-p1.x);
    var t_y = (p.y - p1.y)/(p2.y-p1.y);
    return ( eq(t_x,t_y) && t_x >= 0 && t_x <= 1 && t_y >= 0 && t_y <= 1);
  }

マーカーを追加し、マーカー位置配列を更新します。

    function addMarker(pos, where) {

    var marker = new google.maps.Marker({
      map: map,
      position: pos,
      draggable: true
    });

    markers.splice(where,0,marker); 
    drawPath();
   }

最後に、線を再描画します

  function drawPath() {
    countMarkers();
    var coords = [];
    for (var i = 0; i < markers.length; i++) {
      coords.push(markers[i].getPosition());
    }
    line.setPath(coords);
  }

既存の座標がある場所にマーカーを追加する場合

http://jsfiddle.net/WZqgE/1/

  var pathFutureCoordinates = [
    new google.maps.LatLng(40, -80),
    new google.maps.LatLng(38, -85),
    new google.maps.LatLng(39, -92),
    new google.maps.LatLng(42, -98),
    new google.maps.LatLng(37, -102)      
  ];
  for (var i = 0; i < pathFutureCoordinates.length; i++) {
    new google.maps.Marker({
      map: map,
      position: pathFutureCoordinates[i],
      icon: "http://maps.google.com/mapfiles/kml/pal4/icon39.png"
    });
  }
于 2012-05-19T20:10:45.587 に答える