时间戳

首页 > 解决方案 > 谷歌地图 - ajax 更新图标

javascript - 谷歌地图 - ajax 更新图标

问题描述

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

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

亲切的问候

标签： javascriptphpajaxfunctiongoogle-maps-api-3

解决方案

这很简单。您只需要修复代码的位置即可。

这是我如何使它工作的：

首先，我确保声明了所有必要的变量。我已经提供了数组内容，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
  });
}

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

推荐阅读