1

だから私は開発中のサイトとその背後にあるプレゼンテーション用のRESTサーバーを持っています、私はサイトからいくつかのデバイスをチェックし、サーバー上のGETを介して名前を送信しています。サーバーはmySQLDBからいくつかのジオポジショニングデータを見つけて返しますGETへの応答としてサイトにそれらを。

異なるデバイスごとに動的にポリラインを描画し、それにデバイスごとにDBから返される任意の数の位置を追加したいと思います。

問題は、必要なポリラインを作成することです。

-markersマーカーの配列(DBから取得した位置ごとに1つのマーカー)

-およびlatlngsマップ上の位置の位置の配列

デバイスごとに!

チェックするデバイスの数または各デバイスに対して受け取る位置は静的ではありません。で新しいアレイを作成しようとしましeval("var " + DeviceID + "_Markers = [];");たが、機能しないようです...

基本的に私が今していることは次のとおりです。$$異なるデバイス||間、デバイスの異なる位置#間、および各位置のフィールド間にある非常に大きな文字列でDBから結果を取得します。文字列を取得して「デコード」するコードは次のとおりです。

var devArray = respData.split("$$");

for (i=0 ; i < devArray.length ; i++)
{
    var posArray = devArray[i].split("||");
    for (j=posArray.length-1 ; j >= 0 ; j--)
    {
        var data = posArray[j].split("#");
        var DeviceID = data[0];
        var Date = data[1];
        var Latitude = data[2];
        var Longitude = data[3];
        var Altitude = data[4];
        var Angle = data[5];
        var Speed = data[6];
        parent.ifr2.createLocationMarker(DeviceID,Date,Latitude,Longitude,Altitude,Angle,Speed);
    }
}

createLocationMarker()、グーグルマップAPIであるhtmpページの特定のメソッドを呼び出し、それが言うように、読み取られた位置ごとに新しい位置マーカーを作成します。

    function createLocationMarker(DeviceID,Date,Latitude,Longitude,Altitude,Angle,Speed) {

    var newLocation =  new google.maps.LatLng(Latitude,Longitude);
    var locationMarker = new google.maps.Marker();

    locationMarker.setOptions({
      icon: locationIcon,
      shadow: newShadow,
      draggable: true,
      map: map,
      position: newLocation
    });

    if ((eval("typeof " + DeviceID + "_latlngs") === "undefined") {
        // latlngs Array
        eval("var " + DeviceID + "_latlngs = new google.maps.MVCArray();");

        // markers Array
        eval("var " + DeviceID + "_Markers = [];");

        // displayPath
        eval("var " + DeviceID + "_displayPath = new google.maps.Polyline({ map: map, strokeColor: '#" + Math.floor(Math.random()*16777215).toString(16) + "' ,strokeOpacity: 1.0, strokeWeight: 2, path: latlngs });");
    }

    eval(DeviceID + "_Markers.push(locationMarker);");
    eval(DeviceID + "_latlngs.push(newLocation);");
    eval(DeviceID + "_displayPath.setPath(" + DeviceID + "_latlngs);");

    locationMarker.setMap(map);

    var content = "<b>Device ID: </b>" + DeviceID + "</br><b>Date: </b>" + Date + "</br><b>Latitude: </b>" + Latitude + "</br><b>Longitude: </b>" + Longitude + "</br><b>Altitude: </b>" + Altitude + "</br><b>Angle: </b>" + Angle + "</br><b>Speed: </b>" + Speed + "Km/h";

    var infowindow = new google.maps.InfoWindow({
        content: content,
        disableAutoPan: true
    });

    google.maps.event.addListener(locationMarker, "dblclick", function() {
        infowindow.open(map,locationMarker);
    });

    map.setCenter(newLocation);
}

これにより、最初に作成された後に存在するはずなのに、すべてのポイントで新しい配列evalが作成されるようです...これを実装するためのより良い方法が必要だと確信していますが、現在は見つかりません。異なるデバイスごとにポリラインを動的に作成し、そこにその位置を追加する方法についてのアイデアはありますか?(または、これevalを解決するための良い方法ではないことはわかっていますが、これを機能させる方法です。)

4

0 に答える 0