Google 映射 API 信息窗口仅显示数组中的最后一条语句
Google maps API infowindow showing only last statement from array
我有这个代码。添加标记效果很好,但正确的信息窗口不能..(标记中的标题也是如此)
它只返回数组 infoUser 中所有标记的最后语句。
我知道..我正在重复一个问题,但我尝试用很多已回答的问题来修复它,但它不起作用。
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 3,
center: {lat: 49.7437895, lng: 15.3360726}
});
//array
var infoUser = [
['Germany','Maj','TUC','20','300'],
['Czech Republic','admin','Bla','50','400'],
['Italy','HOOOO','BUC','1','50'],
['Italy','aaaaa','aaa','10','20'],
['Germany','adminek','hopinek','50','1000']
];
var infoWindow = new google.maps.InfoWindow();
var markerCluster = new MarkerClusterer(map, markers,
{imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});
var markers = [];
for (var x = 0; x < infoUser.length; x++) {
var adresa = infoUser[x][0],
name = infoUser[x][1],
firstname = infoUser[x][2],
age = infoUser[x][3],
price = infoUser[x][4];
$.getJSON('http://maps.googleapis.com/maps/api/geocode/json?address='+adresa, null, function (data) {
var p = data.results[0].geometry.location;
var latlng = new google.maps.LatLng(p.lat, p.lng);
var marker = new google.maps.Marker({
position: latlng,
title: adresa,
map: map
}); markers.push(marker); markerCluster.addMarker(marker);
var content = 'Adresa: ' + adresa + 'username: ' + name;
google.maps.event.addListener(marker,'click', (function(marker, content, infoWindow){
return function() {
infoWindow.setContent(content);
infoWindow.open(map,marker);
};
})(marker, content, infoWindow));
});
}
}
您需要在地理编码器调用(adresa
和 name
)以及信息窗口之外的数据上关闭函数 content
/marker
/infoWindow
:
代码片段:
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 3,
center: {
lat: 49.7437895,
lng: 15.3360726
}
});
//array
var infoUser = [
['Germany', 'Maj', 'TUC', '20', '300'],
['Czech Republic', 'admin', 'Bla', '50', '400'],
['Italy', 'HOOOO', 'BUC', '1', '50'],
['Italy', 'aaaaa', 'aaa', '10', '20'],
['Germany', 'adminek', 'hopinek', '50', '1000']
];
var infoWindow = new google.maps.InfoWindow();
var markerCluster = new MarkerClusterer(map, markers, {
maxZoom: 18,
imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'
});
var markers = [];
for (var x = 0; x < infoUser.length; x++) {
var adresa = infoUser[x][0],
name = infoUser[x][1],
firstname = infoUser[x][2],
age = infoUser[x][3],
price = infoUser[x][4];
$.getJSON('http://maps.googleapis.com/maps/api/geocode/json?address=' + adresa, null, function(adresa, name) {
return function(data) {
var p = data.results[0].geometry.location;
var latlng = new google.maps.LatLng(p.lat, p.lng);
var marker = new google.maps.Marker({
position: latlng,
title: adresa,
map: map
});
markers.push(marker);
markerCluster.addMarker(marker);
var content = 'Adresa: ' + adresa + '<br>username: ' + name;
google.maps.event.addListener(marker, 'click', (function(marker, content, infoWindow) {
return function() {
infoWindow.setContent(content);
infoWindow.open(map, marker);
};
})(marker, content, infoWindow));
}
}(adresa, name));
}
}
google.maps.event.addDomListener(window, "load", initMap);
html,
body,
#map {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://cdn.rawgit.com/googlemaps/v3-utility-library/master/markerclustererplus/src/markerclusterer.js"></script>
<div id="map"></div>
我有这个代码。添加标记效果很好,但正确的信息窗口不能..(标记中的标题也是如此)
它只返回数组 infoUser 中所有标记的最后语句。
我知道..我正在重复一个问题,但我尝试用很多已回答的问题来修复它,但它不起作用。
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 3,
center: {lat: 49.7437895, lng: 15.3360726}
});
//array
var infoUser = [
['Germany','Maj','TUC','20','300'],
['Czech Republic','admin','Bla','50','400'],
['Italy','HOOOO','BUC','1','50'],
['Italy','aaaaa','aaa','10','20'],
['Germany','adminek','hopinek','50','1000']
];
var infoWindow = new google.maps.InfoWindow();
var markerCluster = new MarkerClusterer(map, markers,
{imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});
var markers = [];
for (var x = 0; x < infoUser.length; x++) {
var adresa = infoUser[x][0],
name = infoUser[x][1],
firstname = infoUser[x][2],
age = infoUser[x][3],
price = infoUser[x][4];
$.getJSON('http://maps.googleapis.com/maps/api/geocode/json?address='+adresa, null, function (data) {
var p = data.results[0].geometry.location;
var latlng = new google.maps.LatLng(p.lat, p.lng);
var marker = new google.maps.Marker({
position: latlng,
title: adresa,
map: map
}); markers.push(marker); markerCluster.addMarker(marker);
var content = 'Adresa: ' + adresa + 'username: ' + name;
google.maps.event.addListener(marker,'click', (function(marker, content, infoWindow){
return function() {
infoWindow.setContent(content);
infoWindow.open(map,marker);
};
})(marker, content, infoWindow));
});
}
}
您需要在地理编码器调用(adresa
和 name
)以及信息窗口之外的数据上关闭函数 content
/marker
/infoWindow
:
代码片段:
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 3,
center: {
lat: 49.7437895,
lng: 15.3360726
}
});
//array
var infoUser = [
['Germany', 'Maj', 'TUC', '20', '300'],
['Czech Republic', 'admin', 'Bla', '50', '400'],
['Italy', 'HOOOO', 'BUC', '1', '50'],
['Italy', 'aaaaa', 'aaa', '10', '20'],
['Germany', 'adminek', 'hopinek', '50', '1000']
];
var infoWindow = new google.maps.InfoWindow();
var markerCluster = new MarkerClusterer(map, markers, {
maxZoom: 18,
imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'
});
var markers = [];
for (var x = 0; x < infoUser.length; x++) {
var adresa = infoUser[x][0],
name = infoUser[x][1],
firstname = infoUser[x][2],
age = infoUser[x][3],
price = infoUser[x][4];
$.getJSON('http://maps.googleapis.com/maps/api/geocode/json?address=' + adresa, null, function(adresa, name) {
return function(data) {
var p = data.results[0].geometry.location;
var latlng = new google.maps.LatLng(p.lat, p.lng);
var marker = new google.maps.Marker({
position: latlng,
title: adresa,
map: map
});
markers.push(marker);
markerCluster.addMarker(marker);
var content = 'Adresa: ' + adresa + '<br>username: ' + name;
google.maps.event.addListener(marker, 'click', (function(marker, content, infoWindow) {
return function() {
infoWindow.setContent(content);
infoWindow.open(map, marker);
};
})(marker, content, infoWindow));
}
}(adresa, name));
}
}
google.maps.event.addDomListener(window, "load", initMap);
html,
body,
#map {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://cdn.rawgit.com/googlemaps/v3-utility-library/master/markerclustererplus/src/markerclusterer.js"></script>
<div id="map"></div>