Question

我正在尝试为每个标记添加信息窗口。

我尝试过很多想法，但都没有用。

我正在使用wordpress，我不知道这是否会破坏代码。

这就是我现在所做的工作：

    <script>
  var map;
  function initMap() {
    map = new google.maps.Map(document.getElementById('mapa'), {
      center: {lat: 52.1215094, lng: 18.8437753},
      zoom: 6
    });


    setMarkers(map);

  }

  var miasta_sklepy = [
  ['Tarnów', 50.0127817,20.987874,1],
  ['Kraków', 50.0528216,19.9240789,2],
  ['Końskie', 51.1915271,20.4060444, 3]
  ]

  function setMarkers(map){
      var image = {
          url: 'http://icons.iconarchive.com/icons/paomedia/small-n-flat/32/shop-icon.png',
          size: new google.maps.Size(32, 32),
          origin: new google.maps.Point(0,0),
          anchor: new google.maps.Point(16, 16)
      };
      var shape = {
          coords: [0,0,0,32,32,32,32,0],
          type: 'poly'
      };

      for (var i=0; i < miasta_sklepy.length; i++){
          var miasto_sklep = miasta_sklepy[i];
          var marker = new google.maps.Marker({
            position: {lat: miasto_sklep[1], lng:miasto_sklep[2]},
            map: map,
            icon: image,
            shape: shape,
            title: miasto_sklep[0],
            zIndex: miasto_sklep[3]


          });
      }

  }




</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=Ihavemykeyhere&callback=initMap" type="text/javascript"></script>

我尝试过谷歌代码，但它无法使用多个标记。

提前致谢。

Answer 1

我补充了您的代码，并使用//Added row评论标记了每个新行。

Google推荐：“为了获得最佳用户体验，任何时候地图上都只能打开一个信息窗口...”请参阅此处：https://developers.google.com/maps/documentation/javascript/infowindows#add

因此，在此代码中，只使用了一个信息窗口，并点击了infowindow内容更改的标记。

var map;
var infowindow; //Added row
var markers = []; //Added row
function initMap() {
map = new google.maps.Map(document.getElementById('mapa'), {
    center: {lat: 52.1215094, lng: 18.8437753},
    zoom: 6
});

infowindow = new google.maps.InfoWindow(); //Added row
setMarkers(map);

}

var miasta_sklepy = [
['Tarnów', 50.0127817,20.987874,1],
['Kraków', 50.0528216,19.9240789,2],
['Końskie', 51.1915271,20.4060444, 3]
]

function setMarkers(map){
  var image = {
      url: 'http://icons.iconarchive.com/icons/paomedia/small-n-flat/32/shop-icon.png',
      size: new google.maps.Size(32, 32),
      origin: new google.maps.Point(0,0),
      anchor: new google.maps.Point(16, 16)
  };
  var shape = {
      coords: [0,0,0,32,32,32,32,0],
      type: 'poly'
  };

  for (var i=0; i < miasta_sklepy.length; i++){
      var miasto_sklep = miasta_sklepy[i];
      var marker = new google.maps.Marker({
        position: {lat: miasto_sklep[1], lng:miasto_sklep[2]},
        map: map,
        icon: image,
        shape: shape,
        title: miasto_sklep[0],
        zIndex: miasto_sklep[3]
      });
      markers.push(marker); //Added row
      google.maps.event.addListener(marker, 'click', (function(marker, i) { //Added row
        return function() {                                                 //Added row
            infowindow.setContent(miasta_sklepy[i][0]);                     //Added row
            infowindow.open(map, marker);                                   //Added row
        }                                                                   //Added row
        })(marker, i));                                                     //Added row 
  }

}

希望这有帮助！

谷歌地图v3 API JS异步 - 多个标记infowindow Wordpress

1 个答案: