具有不同信息窗口的多个自定义标记（图标）

Question

我正在创建一个地图，我将在其中添加多个自定义标记，并且我希望每个标记都有不同的信息窗口。问题是每个标记都有不同的图标（您在图像中看到的那些带编号的点），这是 GoogleMaps API 代码示例中未解释的示例。我的意思是，他们向您解释了如何创建信息窗口，但仅在您使用变量 marker 而不是变量 icons 的情况下。因此，我不知道应该在哪里添加信息窗口的代码。该网站看起来像这样：

website screenshot

 <script>
  var map;
  function initialize() {
      map = new google.maps.Map(document.getElementById('map'), {
      zoom: 13,
      backgroundColor: '#000000',
      center: new google.maps.LatLng(41.404998, 2.210517),
      mapTypeId: 'roadmap',
      streetViewControl: false,

    });

    var iconBase = 'images/numbers/';
    var icons = {
      001: {
        icon: iconBase + '01.png'
      },
      002: {
        icon: iconBase + '02.png'
      }
    };

    function addMarker(feature) {
      var marker = new google.maps.Marker({
        position: feature.position,
        icon: icons[feature.type].icon,
        map: map
      });
    }

    var features = [
      {
        position: new google.maps.LatLng(41.404998, 2.210517),
        type: 001
        //Barcelona 1
      }, {
        position: new google.maps.LatLng(41.404371, 2.179131),
        type: 002
        //Barcelona 2
      }
    ];

 for (var i = 0, feature; feature = features[i]; i++) {
  addMarker(feature);
};    
}

</script>

Answer 1

如果可以的话，回答 Josep 的最后一个问题（我是 Stack Overflow 的新手，请原谅我的不精确），我更新了 fiddle http://jsfiddle.net/t7trcpv2/1/，添加到 'feature' 对象a 'title' 属性您可以在其中输入自己的数据

var map;
var infowindow;

function initialize() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 13,
    backgroundColor: '#000000',
    center: new google.maps.LatLng(41.404998, 2.210517),
    mapTypeId: 'roadmap',
    streetViewControl: false,
  });
  infowindow = new google.maps.InfoWindow();
  var iconBase = 'images/numbers/';
  var icons = {
    001: {
      icon: "http://maps.google.com/mapfiles/ms/micons/blue.png"
    },
    002: {
      icon: "http://maps.google.com/mapfiles/ms/micons/green.png"
    }
  };

  function addMarker(feature) {
    var marker = new google.maps.Marker({
      position: feature.position,
      icon: icons[feature.type].icon,
      map: map,

    });
    // must be a string (or a DOM node).
    var content = "" + feature.title
    google.maps.event.addListener(marker, 'click', (function(marker, content, infowindow) {
      return function(evt) {
        infowindow.setContent(content);
        infowindow.open(map, marker);
      };
    })(marker, content, infowindow));

  }

  var features = [{
    position: new google.maps.LatLng(41.404998, 2.210517),
    type: 001,
    title:'title1'
      //Barcelona 1
  }, {
    position: new google.maps.LatLng(41.404371, 2.179131),
    type: 002,
    title: 'title2'
      //Barcelona 2
  }];

  for (var i = 0, feature; feature = features[i]; i++) {
    addMarker(feature);
  };
}
google.maps.event.addDomListener(window, "load", initialize);

Answer 2

尝试以这种方式使用闭包

  var features = [
    {
      position: new google.maps.LatLng(41.404998, 2.210517),
      type: 001
      //Barcelona 1
    }, {
      position: new google.maps.LatLng(41.404371, 2.179131),
      type: 002
      //Barcelona 2
    }
  ];




   function addMarker(feature) {
      var marker = new google.maps.Marker({
        position: feature.position,
        icon: icons[feature.type].icon,
        map: map
      });

    var infowindow = new google.maps.InfoWindow()

    var content  = "" + feature.type

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

  }

您可以这样更改功能

var features = [
  {
    position: new google.maps.LatLng(41.404998, 2.210517),
    type: 001,
    message:  'my firts message in info window'
    //Barcelona 1
  }, {
    position: new google.maps.LatLng(41.404371, 2.179131),
    type:  002,
    message:  'my second message in info window'
    //Barcelona 2
  }
];

或者您可以添加一个新的属性

你应该使用

 function addMarker(feature) {
  var marker = new google.maps.Marker({
    position: feature.position,
    icon: icons[feature.type].icon,
    map: map
  });

var infowindow = new google.maps.InfoWindow()

var content  = "" + feature.message

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

具有不同信息窗口的多个自定义标记（图标）

multiple custom markers (icons) with different infowindows

javascript

google-maps

google-maps-api-3

infowindow

markers