1

ポイントの配列を使用して多くのポリラインを描画するJSアプリを作成しますが、すべてのポイントで、このポイントにいくつかの追加のプロパティ（GPSデータ、速度など）があります。

これらの追加の小道具 onmouseover または onmouseclick イベントを表示したいと思います。

私には2つの方法があります：

  1. 標準のポリラインとイベント ハンドラを使用します。ただし、この場合、このポリラインの始点の追加プロパティを決定できません。これらの小道具をポリライン プロパティに保存できないためです。1 つの解決策があります - 追加のプロパティを配列に保存し、ポリラインの最初の点の LatLng でそれらを見つけようとしますが、遅すぎると思います..

  2. ポリラインを拡張し、新しいオブジェクトに追加のプロパティを保存しますが、マウスイベントを拡張することはできません:(

ポリラインを拡張するには、次のコードを使用します。

function myPolyline(prop, opts){
    this.prop = prop;
    this.Polyline = new google.maps.Polyline(opts);
}

myPolyline.prototype.setMap = function(map) {
    return this.Polyline.setMap(map);
}

myPolyline.prototype.getPath = function() {
    return this.Polyline.getPath();
}

myPolyline.prototype.addListener= function(prop) {
    return this.Polyline.addListener();
} 

myPolyline.prototype.getProp= function() {
    return this.prop;
}

myPolyline.prototype.setProp= function(prop) {
    return this.prop = prop;
}

次のように for ループ (i - ポイントの配列内の現在のポイントのインデックス) で新しいオブジェクトを作成します。

var polyline_opts   = {
    path: line_points,
    strokeColor: color,
    geodesic: true,
    strokeOpacity: 0.5,
    strokeWeight: 4,
    icons: [
        {
        icon:   lineSymbol,
        offset: '25px',
        repeat: '50px'
        }
    ],              
    map: map
};

var add_prop    = {
    id:  i,
    device_id: device_id
};

... 

devices_properties[device_id].tracks[(i-1)] = new myPolyline(add_prop, polyline_opts);

どこ：

  • line_points - ポイントの配列 (2 つのポイントのみ)、
  • i - 現在のポイント インデックス
  • devices_properties[device_id].tracks - device_id インデックスによる拡張ポリラインの配列 (プロパティを追加)

その後、次のようにイベントハンドラーを設定しました。

var tmp = devices_properties[device_id].tracks[(i-1)];
google.maps.event.addListener(tmp.Polyline, 'click', function(e) {
...
console.log(tmp.prop.id);
...
}

しかし、この場合、コンソールで常に同じIDを取得します..

私が使うとき

google.maps.event.addListener(devices_properties[device_id].tracks[(i-1)].Polyline, 'click', function(e) {
...
console.log(???); // How to get parent of polyline fired the event?
...
}

ポリラインの親にイベントを発生させる方法がわかりませんか?

4

1 に答える 1

1

私は自分の質問に答えます-それは完了しました、「$.each」の代わりに「for」を使用することにいくつか問題があります:)

使用する前に：

for ( i = 1; i < devices_properties[device_id].history_points.length; i++ ) {
    ...
    create myPolyline
    ...
}

それは機能しません-1つのイベントハンドルを作成しました。

後：

$.each(devices_properties[device_id].history_points, function(i, tmp){
    ...
    create myPolyline ()
    ...
}

そしてそれは機能します-多くのイベントハンドラーを作成します。

イベントを処理するには、これを使用します：

google.maps.event.addListener(c_polyline.Polyline, 'mouseover', function(e) {
    var prop = c_polyline.getProp();
    ...
    console.log(prop.id, prop.device_id);
}
于 2013-08-10T09:34:55.743 に答える