谷歌地图 API 多标记与信息窗口

我试图添加多个标记，每个都有自己的信息窗口，当点击时出现。我有麻烦让 inowindows 上来，当我尝试它要么显示只有一个标记没有 inowindow。

谢谢，如果你需要更多信息请告诉我

<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<style type="text/css">
html {
height: 100%
}


body {
height: 100%;
margin: 0;
padding: 0
}


#map_canvas {
height: 100%
}
</style>
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?key=AIzaSyB1tbIAqN0XqcgTR1-FxYoVTVq6Is6lD98&sensor=false">
</script>
<script type="text/javascript">


var locations = [
['loan 1', 33.890542, 151.274856, 'address 1'],
['loan 2', 33.923036, 151.259052, 'address 2'],
['loan 3', 34.028249, 151.157507, 'address 3'],
['loan 4', 33.80010128657071, 151.28747820854187, 'address 4'],
['loan 5', 33.950198, 151.259302, 'address 5']
];


function initialize() {


var myOptions = {
center: new google.maps.LatLng(33.890542, 151.274856),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP


};
var map = new google.maps.Map(document.getElementById("default"),
myOptions);


setMarkers(map, locations)
}




function setMarkers(map, locations) {


var marker, i
for (i = 0; i < locations.length; i++) {


var loan = locations[i][0]
var lat = locations[i][1]
var long = locations[i][2]
var add = locations[i][3]


latlngset = new google.maps.LatLng(lat, long);


var marker = new google.maps.Marker({
map: map, title: loan, position: latlngset
});
map.setCenter(marker.getPosition())


var content = "Loan Number: " + loan + '</h3>' + "Address: " + add


var infowindow = new google.maps.InfoWindow()


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




</script>
</head>
<body onload="initialize()">
<div id="default" style="width:100%; height:100%"></div>
</body>
</html>
172022 次浏览
小开
最佳答案

You could use a closure. Just modify your code like this:

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

Here is the DEMO

小开 
function setMarkers(map,locations){


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


var loan = locations[i][0];
var lat = locations[i][1];
var long = locations[i][2];
var add =  locations[i][3];


latlngset = new google.maps.LatLng(lat, long);


var marker = new google.maps.Marker({
map: map, title: loan , position: latlngset
});
map.setCenter(marker.getPosition());




marker.content = "<h3>Loan Number: " + loan +  '</h3>' + "Address: " + add;




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


});


}
}

Then move var infowindow = new google.maps.InfoWindow() to the initialize() function:

function initialize() {


var myOptions = {
center: new google.maps.LatLng(33.890542, 151.274856),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP


};
var map = new google.maps.Map(document.getElementById("default"),
myOptions);
map.infowindow = new google.maps.InfoWindow();


setMarkers(map,locations)


}
小开

Here is the code snippet which will work for sure. You can visit below link for working jsFiddle and explainantion in detail. How to locate multiple addresses on google maps with perfect zoom

var infowindow = new google.maps.InfoWindow();
google.maps.event.addListener(marker, 'mouseover', (function(marker) {
return function() {
var content = address;
infowindow.setContent(content);
infowindow.open(map, marker);
}
})(marker));
小开

If you also want to bind closing of infowindow to some event, try something like this

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

Source Link

Demo Link

The following code will show Multiple Markers with InfoWindow. You can Uncomment code to show Info on Hover as well

enter image description here

            var map;
var InforObj = [];
var centerCords = {
lat: -25.344,
lng: 131.036
};
var markersOnMap = [{
placeName: "Australia (Uluru)",
LatLng: [{
lat: -25.344,
lng: 131.036
}]
},
{
placeName: "Australia (Melbourne)",
LatLng: [{
lat: -37.852086,
lng: 504.985963
}]
},
{
placeName: "Australia (Canberra)",
LatLng: [{
lat: -35.299085,
lng: 509.109615
}]
},
{
placeName: "Australia (Gold Coast)",
LatLng: [{
lat: -28.013044,
lng: 513.425586
}]
},
{
placeName: "Australia (Perth)",
LatLng: [{
lat: -31.951994,
lng: 475.858081
}]
}
];


window.onload = function () {
initMap();
};


function addMarkerInfo() {
for (var i = 0; i < markersOnMap.length; i++) {
var contentString = '<div id="content"><h1>' + markersOnMap[i].placeName +
'</h1><p>Lorem ipsum dolor sit amet, vix mutat posse suscipit id, vel ea tantas omittam detraxit.</p></div>';


const marker = new google.maps.Marker({
position: markersOnMap[i].LatLng[0],
map: map
});


const infowindow = new google.maps.InfoWindow({
content: contentString,
maxWidth: 200
});


marker.addListener('click', function () {
closeOtherInfo();
infowindow.open(marker.get('map'), marker);
InforObj[0] = infowindow;
});
// marker.addListener('mouseover', function () {
//     closeOtherInfo();
//     infowindow.open(marker.get('map'), marker);
//     InforObj[0] = infowindow;
// });
// marker.addListener('mouseout', function () {
//     closeOtherInfo();
//     infowindow.close();
//     InforObj[0] = infowindow;
// });
}
}


function closeOtherInfo() {
if (InforObj.length > 0) {
InforObj[0].set("marker", null);
InforObj[0].close();
InforObj.length = 0;
}
}


function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: centerCords
});
addMarkerInfo();
}

提交答案