谷歌地图 - ajax 更新图标答案

【问题标题】：Google Map - ajax update icons谷歌地图 - ajax 更新图标
【发布时间】：2018-11-04 17:11:21
【问题描述】：

我有一个在地图上绘制 latlng 的脚本，一旦绘制了地图，我的脚本就会执行 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]
    });

这不起作用，图标不出现。

亲切的问候

【问题讨论】：

是的，在 ajax 调用中成功调用标记。
请您进一步详细说明
抱歉，删除图标变量的 'var' 关键字。
不——没有运气

标签： javascript php ajax function google-maps-api-3

【解决方案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
  });

地图现在必须显示在页面上。之后，我们将运行您为填充icons 数组所做的ajax 调用。（我不确定您的 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
  });
}

现在应该可以了！检查此sample 以查看正在运行的代码。（不要忘记阅读 cmets 以更好地了解我所做的事情！）

【讨论】：