0

次のコードは、 を使用しpolylineて Google マップに を描画するために使用されますが、ポイントがあるにもかかわらず (マップ上のポイントをマーカーとして表示できるためV3 API) 描画することもあれば、ほとんどの場合描画しないこともありますが、表示されませんpolylinepolyline

更新 2 :openstreetmapレイヤーオーバーを使用していGoogle mapsます。を描画するときに問題が発生しpolyilneますか?

w変数には、文字列としてデータが含まれます。たとえば、次のようになります。

w= 35.1212,55.2333\n36.32366,56.3333

の実際のデータ サンプルw: [このコードは次のポイントのマーカーを描画できますが、ポリラインは描画できません]

34.440501,31.515222
34.441933,31.514346
34.44247,31.514013
34.442603,31.51394
34.443607,31.513423
34.4445,31.512926
34.444762,31.512772
34.445186,31.512523
34.445257,31.512481
34.445311,31.512449
34.445614,31.512264
34.446244,31.511867
34.446939,31.511429
34.447351,31.511193
34.448081,31.512174
34.448241,31.512357
34.448576,31.512741
34.449147,31.513185
34.4499,31.513723
34.450894,31.514401
34.451925,31.515362
34.452905,31.516176
34.454194,31.517266
34.455337,31.518236
34.456215,31.51898
34.456987,31.519646
34.457583,31.520166
34.458298,31.520772
34.458989,31.52139
34.459659,31.521959
34.460476,31.522653
34.461192,31.523228
34.461869,31.523788
34.46256,31.524376
34.463302,31.525015
34.464062,31.525668
34.464433,31.525986
34.464737,31.526246
34.465247,31.526683
34.465498,31.526907
34.466666,31.52792
34.46722,31.528404
34.467327,31.528495
34.468014,31.529081
34.468379,31.52939
34.469296,31.530177
34.469771,31.530583
34.470152,31.53091
34.470951,31.531597
34.471617,31.532172
34.472388,31.532838
34.472664,31.533076
34.47295,31.533397
34.473422,31.533653
34.474028,31.534065
34.474844,31.534629
34.475725,31.535253
34.476083,31.535517
34.476697,31.535947
34.477105,31.536209
34.477627,31.536477
34.478,31.536742
34.478398,31.536989
34.478935,31.537325
34.480044,31.537975
34.480985,31.538529
34.481362,31.53878
34.481416,31.538819
34.482407,31.539419
34.482682,31.539109
34.483132,31.538603
34.483341,31.538368
34.483917,31.537753
34.484202,31.537449
34.484288,31.537357
34.484944,31.536587
34.485118,31.536383
34.485205,31.536304
34.485648,31.535903
34.485984,31.535598
34.486246,31.535381
34.486445,31.535291
34.486533,31.535254
34.486607,31.535282
34.486706,31.535354
34.486869,31.535526
34.487012,31.535692
34.487212,31.535923
34.487273,31.536006
34.487767,31.53571
34.488336,31.535395
34.48883,31.535148
34.489078,31.535032
34.489354,31.534901
34.48955,31.534788
34.489756,31.535011
34.489831,31.535097
34.490268,31.534748
34.49065,31.534473
34.490857,31.53436
34.491044,31.534319
34.491352,31.534248
34.491458,31.534237
34.491548,31.534304
34.491879,31.534209
34.492227,31.534203
34.492457,31.534214
34.492042,31.533636
34.492162,31.533542

注 :何らかの目的でポイントを作成する場合は逆lngにしてありますlat

はa、ポリイン コードとして表す点を含む配列です。

var mypolyline = new google.maps.Polyline({
                    strokeColor: "#FF0000",
                    strokeOpacity: .6,
                    strokeWeight: 3,
                    clickable: true
                    });

                    //  var bounds2 = new google.maps.LatLngBounds();
                        var a=w.split("\n");

                        for(var i=0;i<a.length;i++)
                        {
                            var zz=a[i].split(",");
                            var lat=zz[0];
                            var lng=zz[1];
                            var path = [];
                            var path = mypolyline.getPath();
                            var point = new google.maps.LatLng(parseFloat(lng),parseFloat(lat));
                            createMarker(i,name,point,icon[1],2);
                        //  alert(path.length);
                            path.push(point);
                            mypolyline.setPath(path);
                           mypolyline.setMap(map);
                        }

CreateMarker() 関数

function createMarker(id,name,point,icon,type) {
   //  var marker = new google.maps.Marker(point, customIcons[type]);

     var marker = new google.maps.Marker({
            map: map,
            position: point,
                icon: icon
            });


         markersArray.push(marker);

         google.maps.event.addListener(marker, 'click',  function() {  


          infowindow = new google.maps.InfoWindow({  content: name  }); 
          infowindow.open(map, marker); 
          map.panTo(point);
          });
  return marker;
  }
4

1 に答える 1

0

したがって、配列を作成し、それを無視して、getPath() 関数を使用して MVCArray として再作成します。最初の行を削除します (ただし、これは問題の原因ではありません)。

var path = [];
var path = mypolyline.getPath();

ポリラインを最初に作成するとき、パスは必須属性ですか?

最初はパスなしで mypolyline を作成しているように思えます。したがって、最初の反復でこれを行うと、.setPath() に渡すのは 1 つのポイントだけであるため、機能しませんが、少なくとも 2 つのポイントがある場合にのみパスが機能すると仮定します。

path.push(point);
mypolyline.setPath(path);

更新:空の配列から始めて、座標をループして配列に追加することだと思います。次に、ループを繰り返すたびにポリラインを更新しようとするのではなく、ループの後でポリラインを作成します。例えば：

var a=w.split("\n");

var path = [];

for(var i=0;i<a.length;i++)
{
    var zz=a[i].split(",");
    var lat=zz[0];
    var lng=zz[1];
    var point = new google.maps.LatLng(parseFloat(lng),parseFloat(lat));
    createMarker(i,name,point,icon[1],2);
    path.push(point);
}

var mypolyline = new google.maps.Polyline({
    path: path,
    map: map,
    strokeColor: "#FF0000",
    strokeOpacity: .6,
    strokeWeight: 3,
    clickable: true
});
于 2011-11-10T23:21:07.297 に答える