グーグルマップ：ajax更新アイコン

bugfix> javascript > 投稿 2020-08-22 18:59

地図上に緯度経度をプロットするスクリプトがあります。地図が描画されると、新しいマーカーアイコンで地図を更新するために、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]
    });

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

敬具

javascript

php

ajax

回答 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
  });
}
```
これで動作するはずです！このサンプルをチェックして、実際のコードを確認してください。（コメントを読んで、私がしたことをよりよく理解することを忘れないでください！）

bugfix

グーグルマップ：ajax更新アイコン

javascript

php

ajax

関連記事