信息窗口中的街景全景来自数据库latlng

Question

我想在从数据库创建的标记的信息窗口中显示街景全景。下面的代码显示了很好的街景全景，但只显示了数据库最后一行的纬度和lng。

$.ajax({
url : 'category/subdi.php',
async: true,
}).done(function(json){ 
var data = JSON.parse(json);
for(var i = 0; i < data.length; i++){
var content = '<div id="content" style="width:500px;height:300px;"></div>';
var infowindow = new google.maps.InfoWindow({
content: content
});

var marker = new google.maps.Marker({
position: {lat: parseFloat(data[i].subdi_lat), lng: parseFloat(data[i].subdi_long)},
title: data[i].subdi_name,
map: map
}); 
var pano = null;
google.maps.event.addListener(infowindow, 'domready', function() {
if (pano != null) {
pano.unbind("position");
pano.setVisible(false);
}
pano = new google.maps.StreetViewPanorama(document.getElementById("content"), {
navigationControl: true
});
pano.bindTo("position", marker);
pano.setVisible(true);
});
google.maps.event.addListener(infowindow, 'closeclick', function() {
pano.unbind("position");
pano.setVisible(false);
pano = null;
});

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

Answer 1

最终找到了示例的解决方案。非常感谢。

$.ajax({
url : 'category/subdi.php',
async: true,
}).done(function(json){ 
var data = JSON.parse(json);
for(var i = 0; i < data.length; i++){

var content = '<h6 class="text-success">'
+ data[i].subdi_name 
+ '</h6> Adresse : ' + data[i].subdi_place 
+ '<br/>Gestionnaire : ' 
+ data[i].subdi_gest;
var icon_subdi = new google.maps.MarkerImage("img/map/subdi.svg");
var marker = new google.maps.Marker({
position: {lat: parseFloat(data[i].subdi_lat), lng: parseFloat(data[i].subdi_long)},
icon: icon_subdi,
title: data[i].subdi_name,
animation: google.maps.Animation.DROP,
map: map
}); 
marker.myHtml = content;
var infoWindowContent = document.createElement("div");
infoWindowContent.style.width = "600px";
var htmlContent = document.createElement("div");
infoWindowContent.appendChild(htmlContent);
var streetview = document.createElement("div");
streetview.setAttribute("id", "street");
streetview.style.width = "100%";
streetview.style.height = "300px";
infoWindowContent.appendChild(streetview);
var infowindow = new google.maps.InfoWindow({ content: infoWindowContent});
infoWindows.push(infowindow);
google.maps.event.addListener(marker,'click', (function(marker,content,infowindow){ 
return function() {
openInfoWindow(marker);
};
})(marker,content,infowindow));
function openInfoWindow(marker) {
htmlContent.innerHTML = marker.myHtml;
pin.set("position", marker.getPosition());
infowindow.open(map, marker);
}
var panorama = null;
var pin = new google.maps.MVCObject();
google.maps.event.addListenerOnce(infowindow, "domready", function() {
panorama = new google.maps.StreetViewPanorama(streetview, {
navigationControl: false,
enableCloseButton: false,
addressControl: false,
zoomControl: false,
linksControl: false,
panControl: false,
visible: true
});
panorama.bindTo("position", pin);
});
subdiMarkers.push(marker);
}
subdiCluster = new MarkerClusterer(map,subdiMarkers, subdiClusterStyle);

});