Google Map - значки обновления ajax

Question

У меня есть скрипт, который отображает последние данные на карте, и как только карта нарисована, мой скрипт выполняет запрос 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]
    });

Это не работает, значки не отображаются.

С уважением

Answer 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);
  }
}

YouВ приведенном выше коде вы можете увидеть, что 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
  });
}

Теперь это должно работать!Проверьте этот образец , чтобы увидеть коды в действии.( Не забудьте прочитать комментарии, чтобы лучше понять, что я сделал! )