地图标记未添加到地图

Question

我正在尝试使用闭包来拥有多个地图标记，并且没有任何标记被添加到地图中。我已经搜索了几个小时没有运气，控制台没有发现任何错误，我看不出它有什么问题。任何帮助将不胜感激，这是我的代码：

      var locations = [
      [53.471809, -2.242170, "content1", 'img1.jpg'],
      [53.466407, -2.234769, "content2", 'img2.jpg],
      [53.477134, -2.255313, "content3", 'img3.jpg'],
      [53.462775, -2.291624, "content4", 'img5.jpg']
      ];
      var latLong = new google.maps.LatLng(53.47203,-2.2386741);

      function initialise() {

        var mapOptions={
        center: latLong,
        zoom: 16
    }
    var mapContainer=document.getElementById("mapArea");
    var map=new google.maps.Map(mapContainer, mapOptions);



    function setMarkers(map,locations){

        var marker, i;

        for (i = 0; i < locations.length; i++)
        {  

        var lat = locations[i][0];
        var long = locations[i][1];
        var add =  locations[i][2];
        var img = locations[i][3];

        latlngset = new google.maps.LatLng(lat, long);

        var marker = new google.maps.Marker({  
              map: map, position: latlngset,icon:img  
                });
        map.setCenter(marker.getPosition());


        var content = add;

        var infowindow = new google.maps.InfoWindow();
        marker.setMap(map);

        google.maps.event.addListener(marker,'click', (function(marker,content,infowindow){ 
        return function() {
            infowindow.setContent(content);
            infowindow.open(map,marker);
        };
    })(marker,content,infowindow));  

      }
  }
  setMarkers();
}
window.addEventListener('load',initialise);

Answer 1

1. 您需要调用setMarkers函数。
2. 您需要图标图像的完整路径。

proof of concept fiddle

代码 sn-p：

var locations = [
  [53.471809, -2.242170, "content1", 'http://maps.google.com/mapfiles/ms/micons/blue.png'],
  [53.466407, -2.234769, "content2", 'http://maps.google.com/mapfiles/ms/micons/green.png'],
  [53.477134, -2.255313, "content3", 'http://maps.google.com/mapfiles/ms/micons/orange.png'],
  [53.462775, -2.291624, "content4", 'http://maps.google.com/mapfiles/ms/micons/yellow.png']
];
var latLong = new google.maps.LatLng(53.47203, -2.2386741);

function initialise() {

  var mapOptions = {
    center: latLong,
    zoom: 11
  }
  var mapContainer = document.getElementById("mapArea");
  var map = new google.maps.Map(mapContainer, mapOptions);
  setMarkers(map, locations);


  function setMarkers(map, locations) {

    var marker, i;

    for (i = 0; i < locations.length; i++) {

      var lat = locations[i][0];
      var long = locations[i][1];
      var add = locations[i][2];
      var img = locations[i][3];

      latlngset = new google.maps.LatLng(lat, long);

      var marker = new google.maps.Marker({
        map: map,
        position: latlngset,
        icon: img
      });
      map.setCenter(marker.getPosition());


      var content = add;

      var infowindow = new google.maps.InfoWindow();
      marker.setMap(map);

      google.maps.event.addListener(marker, 'click', (function(marker, content, infowindow) {
        return function() {
          infowindow.setContent(content);
          infowindow.open(map, marker);
        };
      })(marker, content, infowindow));

    }
  }
}
window.addEventListener('load', initialise);

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

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