Question

第一个marker.setIcon从未为我工作过。我检查了浏览器控制台，这是它显示的内容：

所以我尝试使用markerObject.icon =“/ Content / img / icon_critical.svg” （实际上它应该是“/Content/img/icon_selected.svg”，我试图检查它的图像是否无法访问）

这给了我一个奇怪的输出。无论我点击哪个标记，只有特定的标记图标会一直变化。其他所有标记都保持不变。此外，每次都不会发生这种变化。它有时会发生，有时候它什么都不做

我用来添加处理程序的代码是

var cautionIcon = "/Content/img/icon_caution.svg";
var criticalIcon = "/Content/img/icon_critical.svg";
var selectIcon = "/Content/img/icon_selected.svg";


var options = {
        zoom: 8,
        center: new google.maps.LatLng(-34, 151),
        mapTypeId: google.maps.MapTypeId.ROADMAP, //aerial //canvasDark //grayscale            
        zoomControl: true
    };

self.map = new google.maps.Map(document.getElementById('deviceMap'), options);

var setDeviceLocationData = function setDeviceLocationData(minLatitude, minLongitude, maxLatitude, maxLongitude, deviceLocations) {
    var i;
    var loc;
    var mapOptions;
    var pin;
    var pinOptions;

    if (!self.map) {
        return;
    }

    if (!boundsSet) {
        boundsSet = true;
        self.map.fitBounds(
            new google.maps.LatLngBounds(
                new google.maps.LatLng(maxLatitude, minLongitude),
                new google.maps.LatLng(minLatitude, maxLongitude)
            )
        );            
    }

    if (deviceLocations) {
        for (i = 0; i < deviceLocations.length; ++i) {
            loc = new google.maps.LatLng(deviceLocations[i].latitude, deviceLocations[i].longitude);                

            pinOptions = {
                position: loc,
                map: self.map,
                zIndex: deviceLocations[i].status
            };

            switch (deviceLocations[i].status) {
                case 1:
                    pinOptions.icon = cautionIcon;
                    break;

                case 2:
                    pinOptions.icon = criticalIcon;
                    break;
            }

            pin = new google.maps.Marker(pinOptions);
            google.maps.event.addListener(pin, 'click', function () {
                pin.setIcon(selectIcon); // this never works
                pin.icon = resources.selectedIcon;  // this works sometimes with that wierd output i mentioned above.
            });
        }
    }
}

此方法setDeviceLocationData在ajax方法的成功回调中每5秒调用一次，该方法又调用返回deviceLocations的web api控制器。

deviceLocations看起来像这样：

你可以使用如下的deviceLocations：

var deviceLocations = [
{
   "latitude": "33.5346",
   "longitude": "88.579989",
   "status":"1"
},
{
   "latitude": "33.53566",
   "longitude": "88.173395",
   "status":"2"
},
{
   "latitude": "33.6346",
   "longitude": "88.570989",
   "status":"1"
},
{
   "latitude": "33.1346",
   "longitude": "88.679889",
   "status":"1"
},];

PS：除标记颜色变化外，其他所有工作都有效。我尝试查看信息框，但工作得很好。

可能是因为我可能有API密钥问题吗？就像我有一个旧版本的api密钥。或者说，如果地图就像那样，地图根本就不会加载。

在我的Google Developers Console中，我只有1个api密钥，显示的内容类似于此。这有帮助。

Answer 1

pin.setIcon(selectIcon); // this never works

你说＆＃34;这从不起作用＆＃34;，但它确实有效，尽管在最后一个标记上。这是在循环中创建的标记中常见问题的标志，可以通过函数闭包或使用单击侦听器内的this来修复（而不是引用最后一个标记的pin）。

var pin = new google.maps.Marker(pinOptions);
google.maps.event.addListener(pin, 'click', function () {
    this.setIcon(selectIcon); // this never works
});

updated fiddle

代码段

＆＃13;

var geocoder;
var map;

var deviceLocations = [{
  "latitude": "33.5346",
  "longitude": "88.579989",
  "status": "1"
}, {
  "latitude": "33.53566",
  "longitude": "88.173395",
  "status": "2"
}, {
  "latitude": "33.6346",
  "longitude": "88.570989",
  "status": "1"
}, {
  "latitude": "33.1346",
  "longitude": "88.679889",
  "status": "1"
}];

function initialize() {
  var loc;
  var pinOptions;
  var pin;
  var map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(33, 88),
      zoom: 8,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });


  if (deviceLocations) {
    for (i = 0; i < deviceLocations.length; ++i) {
      loc = new google.maps.LatLng(deviceLocations[i].latitude, deviceLocations[i].longitude);

      pinOptions = {
        position: loc,
        map: map,
        // zIndex: deviceLocations[i].status // InvalidValueError: setZIndex: not a number
      };

      switch (deviceLocations[i].status) {
        case 1:
          pinOptions.icon = cautionIcon;
          break;

        case 2:
          pinOptions.icon = criticalIcon;
          break;
      }

      var pin = new google.maps.Marker(pinOptions);
      google.maps.event.addListener(pin, 'click', function() {
        this.setIcon(selectIcon); // this never works
      });
    }
  }
}
google.maps.event.addDomListener(window, "load", initialize);
var cautionIcon = "http://maps.google.com/mapfiles/ms/micons/orange.png";
var criticalIcon = "http://maps.google.com/mapfiles/ms/micons/yellow.png";
var selectIcon = "http://maps.google.com/mapfiles/ms/micons/blue.png";

＆＃13;

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

＆＃13;

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas"></div>

＆＃13;

谷歌地图API setIcon运行正常

1 个答案: