Question

我在地图上显示自定义标记时出现问题，为每个位置显示不同的标记我从包含该位置的数组中获取图像，例如，这是我的代码：

var examplearray = [
    [43,    52.81421,   5.935412, 'image3']
    ];

    var image1 = 'mapsicons/alpha.png';
    var image2 = 'mapsicons/beta.png';
    var image3 = 'mapsicons/charlie.png';


    for (var i = 0; i < examplearray.length; i++) {
        var samplemarker = examplearray [i]
        var marker = new google.maps.Marker({
            position: new google.maps.LatLng (samplemarker[1], samplemarker[2]),
            map: map,
            icon: samplemarker[3],
            zIndex: samplemarker[0]
        });
    }

我无法看到这里出了什么问题，但它没有显示图像，只是为了清楚，图像位于正确的位置并且它们确实有效，如果我更改了＆＃34;示例标记[3] ＆＃34;例如，image1图标确实正确显示，同样适用于更改＆＃34; image3＆＃34;从数组到映像位置（mapsicons / charlie.png），似乎从数组数据到可变数据的转换似乎不起作用。我希望你能提前帮助我！

Answer 1

花了一些时间来理解这个想法。如果将icon: samplemarker[3]替换为icon: this[samplemarker[3]]，会发生什么？

Answer 2

另外两个选择：

将图标的URL添加到数组中。代替：

var examplearray = [ [43,42.81421,5.935412，＆＃39; image3＆＃39;] ];

使用：

var examplearray = [
  [43,    52.81421,   5.935412, 'mapsicons/charlie.png']
];

Proof of concept fiddle

引用数组中的变量，而不是使用名称为

而不是：

var examplearray = [
  [43,    52.81421,   5.935412, 'image3']
];

使用：

var examplearray = [
  [43,    52.81421,   5.935412, image3]
];

proof of concept fiddle

代码段（选项1）：

＆＃13;

function initialize() {
  var map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  var examplearray = [
    [43, 52.81421, 5.935412, 'http://maps.google.com/mapfiles/ms/micons/yellow.png']
  ];

  var bounds = new google.maps.LatLngBounds();
  for (var i = 0; i < examplearray.length; i++) {
    var samplemarker = examplearray[i];
    var marker = new google.maps.Marker({
      position: new google.maps.LatLng(samplemarker[1], samplemarker[2]),
      map: map,
      icon: samplemarker[3],
      zIndex: samplemarker[0]
    });
    bounds.extend(marker.getPosition());
  }
  map.fitBounds(bounds);
}
google.maps.event.addDomListener(window, "load", initialize);

＆＃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;

代码段（选项2）：

＆＃13;

function initialize() {
  var map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  var image1 = 'http://maps.google.com/mapfiles/ms/micons/blue.png';
  var image2 = 'http://maps.google.com/mapfiles/ms/micons/green.png';
  var image3 = 'http://maps.google.com/mapfiles/ms/micons/yellow.png';
  var examplearray = [
    [43, 52.81421, 5.935412, image3]
  ];

  var bounds = new google.maps.LatLngBounds();
  for (var i = 0; i < examplearray.length; i++) {
    var samplemarker = examplearray[i];
    var marker = new google.maps.Marker({
      position: new google.maps.LatLng(samplemarker[1], samplemarker[2]),
      map: map,
      icon: samplemarker[3],
      zIndex: samplemarker[0]
    });
    bounds.extend(marker.getPosition());
  }
  map.fitBounds(bounds);
}
google.maps.event.addDomListener(window, "load", initialize);

＆＃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;

Javascript，从数组中读取变量

2 个答案: