来自数据库 lat lng 的 infowindows 中的街景全景图

Question

我想在从数据库创建的标记的信息窗口中显示街景全景。 下面的这段代码很好地显示了街景全景图，但只有数据库最后一行的 lat 和 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);
    
});