Question

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

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

尝试以这种方式使用闭包

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));

或者您可以添加新属性

你应该使用

CMakeFiles\Besart.dir/objects.a(library1.cpp.obj): In function `Init':
C:/Users/Besart/ClionProjects/Besart/Data Structures 1/HW 2/library1.cpp:17: 
undefined reference to `DataStructure::DataStructure()'

Answer 2

如果我可以回答Josep的最后一个问题（我是Stack Overflow的新手，请原谅我的不精确），我更新了小提琴http://jsfiddle.net/t7trcpv2/1/，在'feature'对象中添加了'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);

多个自定义标记（图标）与不同的infowindows

2 个答案: