Question

我有一个脚本在地图上绘制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]
    });

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

亲切的问候

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

您可以在上面的代码中看到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以查看操作中的代码。（不要忘记阅读评论以更好地理解我的所作所为！）

谷歌地图 - ajax更新图标

1 个答案: