Question

在我的项目中，我使用谷歌几何定位API在地图上使用站点名称而不是纬度和经度显示标记。它工作正常。现在，我想在我的数据库字段resp上显示不同站点的不同标记。如果resp大于50，则标记为红色，如果小于50，则标记为绿色。我尝试了如下代码。但它显示所有绿色或全红色。如果resp的第一个值低于50，那么所有标记都是绿色，如果第一个值大于50，则所有标记都是红色。如何动态显示标记作为resp的值？请帮我。我的代码是

<script>
$(document).ready(function () {
var map;
var elevator;
var myOptions = {
    zoom: 4,
    center: new google.maps.LatLng(39.639537564366684, -97.03125),
    mapTypeId: 'terrain'
};
map = new google.maps.Map($('#map')[0], myOptions);

var addresses = [<?php $numItems = count($val); $i=0; foreach($val as $data){ echo "['".$data['name']."','".$data['resp']."']"; if(++$i !== $numItems) {echo ",";}}?>];
//var colordot =[];
//alert(addresses);
for (var x = 0; x < addresses.length; x++) {
//alert(addresses[x][1]);

if (addresses[x][1] >= 50) {

                 var img= 'img/red-dot.png';
            }
            else{
                var img= 'img/green-dot.png';
            }
            //alert(colordot[x]);
    $.getJSON('http://maps.googleapis.com/maps/api/geocode/json?address='+addresses[x][0]+'&sensor=false', null, function (data) {
        var p = data.results[0].geometry.location
        var latlng = new google.maps.LatLng(p.lat, p.lng);
        new google.maps.Marker({

                icon: img,

            position: latlng,
            map: map
        });

    });
}

});
</script>

Answer 1

解决问题的一种方法是在地理编码器调用中对img变量进行函数闭包：

$.getJSON('http://maps.googleapis.com/maps/api/geocode/json?address=' + addresses[x][0] + '&sensor=false', null, function(img) {
  return function(data) {
    var p = data.results[0].geometry.location
    var latlng = new google.maps.LatLng(p.lat, p.lng);
    new google.maps.Marker({
     icon: img,
     position: latlng,
      map: map
    });

  }
}(img));

proof of concept fiddle

代码段

$(document).ready(function() {
  var map;
  var elevator;
  var myOptions = {
    zoom: 4,
    center: new google.maps.LatLng(39.639537564366684, -97.03125),
    mapTypeId: 'terrain'
  };
  map = new google.maps.Map($('#map')[0], myOptions);

  var addresses = [
    ["New York, NY", 1],
    ["Boston, MA", 75]
  ];
  for (var x = 0; x < addresses.length; x++) {
    if (addresses[x][1] >= 50) {
      var img = 'http://maps.google.com/mapfiles/ms/micons/red.png';
    } else {
      var img = 'http://maps.google.com/mapfiles/ms/micons/green.png';
    }
    $.getJSON('http://maps.googleapis.com/maps/api/geocode/json?address=' + addresses[x][0] + '&sensor=false', null, function(img) {
      return function(data) {
        var p = data.results[0].geometry.location
        var latlng = new google.maps.LatLng(p.lat, p.lng);
        new google.maps.Marker({
          icon: img,
          position: latlng,
          map: map
        });
      }
    }(img)).fail(function(jqxhr, textStatus, error) {
      var err = textStatus + ", " + error;
      console.log("Request Failed: " + err);
    });;
  }
});

html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry,places&ext=.js"></script>
<div id="map"></div>

Answer 2

我遇到了类似的异步地理编码问题，我最终用bind()方法解决了这个问题。

你可以尝试：

    var marker = new google.maps.Marker({

            icon: img,

        position: latlng,
        map: map
    });

$.getJSON('http://maps.googleapis.com/maps/api/geocode/json?address='+addresses[x][0]+'&sensor=false', null, function (data) {
    var p = data.results[0].geometry.location
    var latlng = new google.maps.LatLng(p.lat, p.lng);

    this.position = latlng;
    this.icon = img;

}.bind(marker));

谷歌地图不同的颜色标记不起作用

2 个答案: