谷歌地图API V3 - infowindows @在2张地图上的标记

Question

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

这里就是我要做的：我有纬度/经度，地址，图片，说明数据库....等

在我的最后一页，我有2个地图，一个为法国，巴黎之一。 如果lat/lng位于巴黎，则标记位于巴黎地图上，如果位于巴黎外部，则位于法国地图上。

到目前为止，我所做的正是我想要的，但我被困在信息窗口:( 我可以打开它们，但不能自动关闭它们... 我只是想有一个信息窗口在同一时间打开

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

（“mapidf”是巴黎“mapfr”是法国，我已经打消了我的尝试与信息窗口哪些不起作用）

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

如果你想有每个地图一个标志，为每个地图一个单独的信息窗口，并与标记像你这样的地图关联起来。

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>

Answer 2

也许最简单的方法是创建信息的单个实例窗口和重复使用它的所有标记，如下面所示：

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