Question

我正在制作Google Map API V3代码，我是JS的初学者，我有点困惑。

以下是我要做的事情：我有一个包含Lat / Lng，地址，图片，说明等的数据库

在我的最后一页上，我有2张地图，一张用于法国，一张用于巴黎。如果lat / lng在巴黎，则标记在巴黎＆＃39;地图，如果它在巴黎之外，它会在法国地图上显示。

到目前为止，我已经完成了我想要的工作，但我仍然坚持使用infoWindow :( 我可以打开它们，但不能自动关闭它们...... 我只想在同一时间打开一个信息窗口。

这是我的代码（只是JS部分）：

（＆＃34; mapidf＆＃34;适用于巴黎和＃34; mapfr＆＃34;适用于法国，我已经删除了我在没有工作的情况下的尝试）

function CreateMarker(marker, map, infowindow, description)
    {
        google.maps.event.addListener(marker, 'click');
        marker.setMap(map);
    }



function initialize(ListeDesPoints) {
    var mapidfOptions = {
          center: { lat: 48.856614, lng: 2.352222},
          zoom: 11
        };
    var mapfrOptions = {
          center: { lat: 46.227638, lng: 2.213749},
          zoom: 5
        };

     var mapidf = new google.maps.Map(document.getElementById('maps-idf'),
            mapidfOptions);

     var mapfr = new google.maps.Map(document.getElementById('maps-fr'),
            mapfrOptions);


    var infowindow = new Array();
    var marker = new Array();

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

                marker[i] = new google.maps.Marker({
                                        position: new google.maps.LatLng (ListeDesPoints[i]['lat'], ListeDesPoints[i]['lng']),
                                        title: ListeDesPoints[i]['address']
                                 });
                var max_lat = 48.9602260;
                var min_lat = 48.7451930;
                var max_lng = 2.6327379;
                var min_lng = 2.0946256;
                        if(ListeDesPoints[i]['lat'] > max_lat || ListeDesPoints[i]['lat'] < min_lat || ListeDesPoints[i]['lng'] > max_lng || ListeDesPoints[i]['lng'] < min_lng)
                            {
                                var map = mapfr;
                            }
                        else
                            {
                                var map = mapidf;
                            }
                infowindow[i] = new google.maps.InfoWindow({content:""})
                var description = '<h2>'+ ListeDesPoints[i]['address']+'</h2><img src="'+ListeDesPoints[i]['image']+'" />';


                CreateMarker(marker[i], map, infowindow[i], description);
        }


}

你有可能注意到我做错的其他事情......请随意批评这段代码：）

非常感谢

Answer 1

最简单的方法可能是创建单一信息窗口实例并将其重用于所有标记，如下所示：

var infowindow = new google.maps.InfoWindow({});
var marker = new Array();

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

      marker[i] = new google.maps.Marker({
           position: new google.maps.LatLng(data[i]['lat'], data[i]['lng']),
           title: data[i]['address'],
           map: map
      });

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

}

根据Info Windows：

最佳做法：为获得最佳用户体验，只需一个信息窗口应该在任何时候在地图上打开。多个信息窗口地图显得杂乱无章。如果您一次只需要一个信息窗口，您可以只创建一个InfoWindow对象并在不同的位置打开它地图事件上的位置或标记，例如用户点击。如果你这样做需要多个信息窗口，可以显示多个InfoWindow 对象同时出现。

在这种情况下，当您点击新标记而不必致电close() method时，信息窗口应自动关闭。

JSFiddle：Modified example

Answer 2

如果您希望每个地图都有一个标记，请为每个地图创建一个单独的InfoWindow，并将其与标记相关联，就像您执行地图一样。

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

    marker[i] = new google.maps.Marker({
        position: new google.maps.LatLng(ListeDesPoints[i]['lat'], ListeDesPoints[i]['lng']),
        title: ListeDesPoints[i]['address']
    });
    var max_lat = 48.9602260;
    var min_lat = 48.7451930;
    var max_lng = 2.6327379;
    var min_lng = 2.0946256;
    if (ListeDesPoints[i]['lat'] > max_lat || ListeDesPoints[i]['lat'] < min_lat || ListeDesPoints[i]['lng'] > max_lng || ListeDesPoints[i]['lng'] < min_lng) {
        var map = mapfr;
        var infowindow = infowindowfr;
    } else {
        var map = mapidf;
        var infowindow = infowindowidf;
    }
    //infowindow[i] = new google.maps.InfoWindow({ content: "" });
    var description = '<h2>' + ListeDesPoints[i]['address'] + '</h2><img src="' + ListeDesPoints[i]['image'] + '" />';


    CreateMarker(marker[i], map, infowindow, description);
}

proof of concept fiddle

代码段

function CreateMarker(marker, map, infowindow, description) {
  marker.setMap(map);

  google.maps.event.addListener(marker, 'click', function() {
    infowindow.setContent(description);
    infowindow.open(map, this);
  });
}

function initialize(ListeDesPoints) {
  var mapidfOptions = {
    center: {
      lat: 48.856614,
      lng: 2.352222
    },
    zoom: 11
  };
  var mapfrOptions = {
    center: {
      lat: 46.227638,
      lng: 2.213749
    },
    zoom: 5
  };

  var mapidf = new google.maps.Map(document.getElementById('maps-idf'),
    mapidfOptions);

  var mapfr = new google.maps.Map(document.getElementById('maps-fr'),
    mapfrOptions);

  //var infowindow = new Array();
  var infowindowfr = new google.maps.InfoWindow({});
  var infowindowidf = new google.maps.InfoWindow({});

  var marker = new Array();

  for (var i = 0; i < ListeDesPoints.length; i++) {

    marker[i] = new google.maps.Marker({
      position: new google.maps.LatLng(ListeDesPoints[i]['lat'], ListeDesPoints[i]['lng']),
      title: ListeDesPoints[i]['address']
    });
    var max_lat = 48.9602260;
    var min_lat = 48.7451930;
    var max_lng = 2.6327379;
    var min_lng = 2.0946256;
    if (ListeDesPoints[i]['lat'] > max_lat || ListeDesPoints[i]['lat'] < min_lat || ListeDesPoints[i]['lng'] > max_lng || ListeDesPoints[i]['lng'] < min_lng) {
      var map = mapfr;
      var infowindow = infowindowfr;
    } else {
      var map = mapidf;
      var infowindow = infowindowidf;
    }
    //infowindow[i] = new google.maps.InfoWindow({ content: "" });
    var description = '<h2>' + ListeDesPoints[i]['address'] + '</h2><img src="' + ListeDesPoints[i]['image'] + '" />';


    CreateMarker(marker[i], map, infowindow, description);
  }

}

//Usage
google.maps.event.addDomListener(window, 'load', function() {
  //1.load data
  var points = [{
    'lat': 48.856614,
    'lng': 2.352222,
    'address': 'Paris',
    'image':'data:image/jpeg;base64,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'
  }, {
    'lat': 48.85837,
    'lng': 2.294481,
    'address': 'Eiffel Tower',
    'image': 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBwgHBgkIBwgKCgkLDRYPDQwMDRsUFRAWIB0iIiAdHx8kKDQsJCYxJx8fLT0tMTU3Ojo6Iys/RD84QzQ5OjcBCgoKDQwNGg8PGjclHyU3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3N//AABEIAEgASAMBIgACEQEDEQH/xAAaAAACAwEBAAAAAAAAAAAAAAAABAECAwUH/8QALhAAAgICAQEFBQkAAAAAAAAAAAECEQMSIUETMVFhcQQiscHhBSMkMkKBkaHR/8QAGQEAAwEBAQAAAAAAAAAAAAAAAAEDBAIF/8QAHxEBAQEAAgEFAQAAAAAAAAAAAAERAwRxAhIhMUET/9oADAMBAAIRAxEAPwDz5E0CJPQY1JKyuhrRFDwM9Q1GJQivZsc1e7nJP0SjXxZnQYGTQUaURQ8DOiS9ECwNESFFkh4SoUXoKHhWmtcc/s5uKpw57uraXfYjR05rJH7Pp7auKfWmvcfzEKI8G5fKvL8WKURRpQUWR1k0BeiQPWmgajnZFXjOsc+4rqFMY0IcPIMGt8sfws4pLhcd3TX/AB/35iOp0XvJZFLXh5FXkkvp/HqKKBm612Xyvz/c8MlEnU2UCdDTiBZxAYcAED7xlHjHNCrgUTJaMmGLacY13tIZeMthhWWLq0nbV13c/I59VyWn6fm4FCM8ey/XkyxXu88pfX058BDQ6eC+zxWnxKL5fi306cJen7iksesmvDgydS/cauz+VjGBOpqoFtTYyl3ADdwIEeuq8RV4gAabOWMV9qzdj93GOTtJwlrKMFJJcJ3bXRkgR7Fs47YtwTeSaUx58sZuLx5eYJOoK+K5/N15v1Xhy4pR9olOcYzi9vejONNN8/BoAMnU9V/pjX2ZPYusZGgAeiwIcCAAA//Z'
    
  }, {
    'lat': 46.227638,
    'lng': 2.213749,
    'address': 'France',
    'image':'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOMAAACXCAMAAADQ4xypAAAAFVBMVEX///8AI5XtKTl0e7fzfYTtESgAAJCDlMQAAAAAp0lEQVR4nO3PNwEAMAADoHT6l1wTOXqAAzJq7krPPrMmjo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Onx0fofSNkUYueUMAAAAASUVORK5CYII='
  }, {
    'lat': 44.837789,
    'lng': -0.57918,
    'address': 'Bordeaux',
    'image':'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBwgHBgkIBwgKCgkLDRYPDQwMDRsUFRAWIB0iIiAdHx8kKDQsJCYxJx8fLT0tMTU3Ojo6Iys/RD84QzQ5OjcBCgoKDQwNGg8PGjclHyU3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3N//AABEIAEgASAMBIgACEQEDEQH/xAAbAAABBQEBAAAAAAAAAAAAAAAEAAIDBQYBB//EADYQAAIBAwIEBAQEBAcAAAAAAAECAwAEERIhBRMxQSJRYYEycZGhscHR8AZC4fEUFVJicrLC/8QAGgEAAwEBAQEAAAAAAAAAAAAAAQIDAAQFBv/EACIRAAICAQQCAwEAAAAAAAAAAAABAhEDBBMxQSHwFDJCEv/aAAwDAQACEQMRAD8A0AfyrodvOhA5HenrIcda9WjiCw3rXQc9KGD4p6yECgYIBp4ahxIcU7WKBibXjoKWo1BzK6JPWsEIGcZNKoDJt1rlajAGtD1FcBQdCayvC+KzxyyJex3BGBpJ8QB8qPn4zpwLa2lnJXVnZQPrS7sKtsfanfhF8JAMU7mZ9Ky0nE+MHTyrKJSTg6jk6s9OvWmpd/xBMpaMRKucZUZ/I0j1OFfoZafK/wAms5mxyQAOpNB3fGLW1OjVzX/0x749+lZiWPjd2Ghnn1DOCnLJBx6YGarrmG4tZOW0SHG4AUoB36E0I6nE3SYZafJFW0bNf4gsi6q/MjVh8bp4fcjOPfarASh1DIwKkZBByCK88iuZQfHH9MHy8h6CiLG+kspNcNzLCCRqikU6Dj6+/Sm3ooXab4N3rpUBY3qXtuJYyp7HQ2oZpVZNNWibTTpmbh4xpZmUnOd8yKSPkcZHT7E+dTDjd1FGoUltgnxJ6dvYfjUfDpkiZudpPjQdfPA/9VYw3NsI0bCnSA225HhKflXzuaTi/EbPdxR/qP2oD/zS73YNKNWGyCvbofn601eL3EUaqon08zmOCB19KJlhtJFMelFyI4CMY2BBx7122gtw5dCgDvpbf+Tuv9Km86S8w98FFhb4kVzcVmgZtH+IyX1rlVOG/sKYOLzXkzSSJcs6+HPLUD5faj2swLKN0Lc6OYGIA58OkZz9zQd5aRLdMlshKHmHv1G610YsqlwvbIZcbXL9oWt3GDHLvt4tI9P360tIGW0oAd8ll+f5/SpxZHQ2FRSdxnsSuf8AtvRQtAzMARjP8q7DxH+3tRlnrsMdOn0V2hdWpSFI3yp3/GlV0lmgSR9sKdyzY/ftSofIfQfjxM5Kl3bPq0pKNYc6TpJw2r9PYDFQC9bSIp42iOlE1SLsN8lvbsKs41O4Rz/wcV1ShPLmTQTtjtXVKEWcsZNcAcF6JLmJo2xzLpmxn4VABJPYZwaYtwXgs3DgK96ShZeoGAQPfNTz8KttJkRNIUE5jOM4+1QW9nKxintpSrRMGjMi7qcBgR9am8K6Kbsux99csnDr14mAMcgIwdwxbY/hRqSoJlHLkeR1l0j4Q3h6Z86rmgntLS5V1URy7ySDBOwPc/Oo0u4UjXR4+4/ZoPC2qCs1M1xkEduxTlodIxpXLfCB36b0PPxq2t2KXdyquh8KSnUy9+n76Cs7PxK6ubc2/OeFGGC0J0tj51TtwYLJzHuDIh3Kuu7H1IO9Sjpkh56hvg0V5xC/vm18OS2mt025kkytvjyBOD7Gu1X2rR20HLjUAd2G2d6VdCxUR3L7Lh0YMApHMBYDPXKtj75H386kmjS5iWRVGdOpPM57UqVMZoEN7bInLMuskbKoySP16fWgG4zKU028SRY21Yyf0pUqokiLbAJpZJm1Suzn/cc1CGrtKnFFG7q2etEyzkxjJ7UqVLQUwUzHt0pUqVOKf//Z'}];
  
  initialize(points);
});

#maps-fr,
#maps-idf {
  height: 240px;
  width: 640px;
  margin: 0px;
  padding: 0px;
}

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

谷歌地图API V3 - infowindows @ markers在2个地图上

2 个答案: