-1
Aşağıdaki kod, yapmaya çalıştığım şeyi gösterir. Her infowindow'u, createList() 'de oluşturulan li öğesine tıklayarak açmaya çalışıyorum. Bu işe yaramıyor ... 'Marker' tanımladığım, hangi anladım ki, ama bunu nasıl düzelteceğimi bilmiyorum. Kaynak kodunu ve canlı haritayı buradan görüntüleyebilirsiniz: http://home.messiah.edu/~dw1248/dev/lodgingTest.htmljavascript ile infowindows nasıl açılır Google maps api
Herhangi bir yardım için teşekkür ederiz. Şimdiden teşekkür ederim!
<html>
<head>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
font-family: Roboto, Arial, sans-serif;
}
#map {
width: 100%;
height: 100%;
}
.list {
width: 25%;
height: 75%;
z-index: 2;
position: absolute;
top: 10%;
left: 1.5%;
background-color: white;
border-radius: 2px;
box-shadow: 0 2px 4px rgba(0,0,0,0.2),0 -1px 0px rgba(0,0,0,0.02);
font-size: 0.82em;
padding-left: 8px;
padding-right: 8px;
padding-top: 48px;
overflow: scroll;
}
li {
list-style-type: none;
}
.listHeader {
width: 25%;
height: 40px;
padding-left: 8px;
padding-right: 8px;
z-index: 3;
position: absolute;
top: 10%;
left: 1.5%;
background-color: white;
border-radius: 3px;
box-shadow: 0 2px 4px rgba(0,0,0,0.2),0 -1px 0px rgba(0,0,0,0.02);
}
.listHeader h1 {
text-align: center;
font-size: 1em;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?libraries=places"></script>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>
<script>
var map;
var service;
var infowindow;
function initMap() {
var messiah = {
lat: 40.158350,
lng: -76.987454
};
var center = {
lat: 40.158350,
lng: -77.076
};
map = new google.maps.Map(document.getElementById('map'), {
center: center,
zoom: 11
});
var marker = new google.maps.Marker({
position: messiah,
map: map,
title: 'Messiah College'
});
var request = {
location: messiah,
radius: 10000,
type: ['lodging']
}
service = new google.maps.places.PlacesService(map);
service.nearbySearch(request, callback);
infowindow = new google.maps.InfoWindow();
}
function callback(results, status) {
if (status === google.maps.places.PlacesServiceStatus.OK) {
results.forEach(createMarker);
results.forEach(createList);
}
}
function createMarker(place) {
var placeLoc = place.geometry.location;
var marker = new google.maps.Marker({
map: map,
icon: {
url: 'http://maps.gstatic.com/mapfiles/circle.png',
anchor: new google.maps.Point(10, 10),
scaledSize: new google.maps.Size(10, 17)
},
position: place.geometry.location
});
///////////Look Here To Start Next Time
marker.addListener('click', function() {
var request = {
reference: place.reference
};
service.getDetails(request, function(details, status) {
var content = '<div><strong>' + details.name + '</strong><br>' + details.formatted_address + '<br>' + details.formatted_phone_number;
if (!!details.website) {content += '<br><a href=' + details.website + ' target= "_blank"> Website </a>'}
if (!!details.rating) {content += '<br>' + 'Rating: ' + details.rating }
infowindow.setContent(content);
infowindow.open(map, marker);
});
});
}
function createList(place) {
var request = {
reference : place.reference,
};
service.getDetails(request, function(details, status) {
if (status === google.maps.places.PlacesServiceStatus.OK) {
$('.list').append('<li class="listItem">' + details.name + '</li><br/>');
$('.listItem').click(function() {
var content = '<div><strong>' + details.name + '</strong><br>' + details.formatted_address + '<br>' + details.formatted_phone_number;
if (!!details.website) {content += '<br><a href=' + details.website + ' target= "_blank"> Website </a>'}
if (!!details.rating) {content += '<br>' + 'Rating: ' + details.rating }
infowindow.setContent(content);
infowindow.open(map, marker);
});
} else if (status === google.maps.GeocoderStatus.OVER_QUERY_LIMIT) {
setTimeout(function() {
createList(place);
}, 200);
}
});
}
window.onload = initMap;
</script>
</head>
<body>
<div id="map">
</div>
<div class="listHeader">
<h1>Lodging List</h1>
</div>
<div class="list">
<div>
</body>
</html>
Eğer 'var işaretleyici ilan etmek gerekir,' fonksiyonu dışında 'createMarker()' o zaman kesinlikle için ... ben –
denedim çalışacaktır zaman Bunu yapın, o zaman infowindow sadece bir yerde açılır ve o yer için doğru bilgi değildir. –
Bunun nedeni, yeni işaretçi oluşturulduğunda, infowindow içeriğinin her seferinde geçersiz kılınmasıdır, bu yüzden son kayıt ayrıntılarını gösterir. Çözüm, her bir belirteç detayı için benzersiz bir intowow değeri kullanmaktır ... –