bugfix> javascript > 投稿

地図上に緯度経度をプロットするスクリプトがあります。地図が描画されると、新しいマーカーアイコンで地図を更新するために、ajaxリクエストを実行してアイコンを取得します。

これは私がこれまでに持っているものです:

for( i = 0; i < markers.length; i++ ) {
    var position = new google.maps.LatLng(markers[i][1], markers[i][2]);
    bounds.extend(position);
$.ajax({
    type: 'GET',
    url: 'http://localhost/new/cqc/get_rating.php',
    data: 'location_id=<?php echo $row['location_id']; ?>',
    async: false,
    success: function (response) {
        icons=[response];
    }
});

    marker = new google.maps.Marker({
    position: position,
        scaledSize : new google.maps.Size(10,10),
        map: map,
        draggable: true,
        title: markers[i][0],
        icon: icons[i][0]
    });

これは機能せず、アイコンは表示されません。

敬具

回答 1 件
  • これは簡単です。あなたはただ修正する必要がありますポジショニング あなたのコードの。

    これがどのように機能するかを示します。

    まず、必要な変数がすべて宣言されていることを確認しました。 markers の配列コンテンツを提供しました  だから、 map をロードした後にそれを使うことができました 。次に、配列 icons を追加しました  後で使用するため、および map  マップクラスを処理する変数。

    var icons = [];
    var markers = [
      ['Chicago', 41.878114,-87.629798],
      ['Detroit', 42.331427,-83.045754],
      ['Kansas', 39.099727,-94.578567],
      ['Des Moines', 41.600545,-93.609106],
      ['Colorado Springs', 38.833882,-104.821363],
      ['Nashville', 36.162664,-86.781602],
      ['Indianapolis', 39.768403,-86.158068],
      ['Lexington', 38.040584,-84.503716],
    ];
    
    

    次に、マップを開始しました:(この例はシカゴを中心に)

    function initMap() {
      var location = new google.maps.LatLng(latlng.lat, latlng.lng)
      map = new google.maps.Map(document.getElementById('map'), {
        center: {lat: 41.878114, lng: -87.629798},
        zoom: 5
      });
    
    

    マップがページに表示されている必要があります。その後、 ajax を実行します   icons を作成するために作成した呼び出し  アレイ。 (あなたの ajax かどうかは本当にわかりません  私はそれをテストする方法がないため、コードは動作します)。

       $.ajax({
           type: 'GET',
           url: 'http://localhost/new/cqc/get_rating.php',
           data: 'location_id=<?php echo $row["location_id"]; ?>',
           async: false,
           success:function(response){
             icons=[response];
           }
        });
    
    

    あなたの ajax からのリターン  コードを機能させるには、コードは次のようになっている必要があります。

    [
      ['icon1.png'],
      ['icon2.png'],
      ['icon3.png'],
      ['icon4.png'],
      ['icon5.png'],
      ['icon6.png'],
      ['icon7.png'],
      ['icon8.png']
    ];
    
    

    icon を取得した後  配列が読み込まれたら、ループを続行できます。ループ内では、 icon を含む変数でなければなりません  マーカーを作成するための関数(このコードでは、マーカー関数を分離しています):

     for( var i=0; i < markers.length; i++){
        var image = {
          url: icons[i][0],
          scaledSize: new google.maps.Size(50, 32)
        };
        create_marker({lat:markers[i][1],lng:markers[i][2]}, i, image);
      }
    }
    
    

    上記のコードでは、 scaledSize  変数 image 内にある  あなたの icon として機能します  オブジェクト( marker 内にあるものと比較)  変数)。これは、 scaledSize  アイコン自体のためであり、マーカーのためではありません。

    今、 function initMap の外 、 function create_marker を追加します 。関数のパラメーターで渡される変数に注意してください。これは position です 、 i  ループの数を取得する変数、および image  アイコンを追加するには:

    function create_marker(position, i, image){
      marker = new google.maps.Marker({
        position: position,
        map: map,
        draggable: true,
        title: markers[i][0],
        icon: image
      });
    }
    
    

    これで動作するはずです!このサンプルをチェックして、実際のコードを確認してください。 (コメントを読んで、私がしたことをよりよく理解することを忘れないでください!

あなたの答え