在Google地图infowindow中嵌入StreetViewPanorama

时间:2014-08-19 16:10:25

标签: javascript google-maps google-maps-api-3 closures

我正在尝试在Google地图标记infowindow(弹出窗口)中嵌入街景全景图。问题是,当我点击标记时,它只会更改streetViewPanorama的内容。否则,每个标记的文本内容都是相同的。

请参阅以下代码中的click侦听器或查看JSFiddle中的问题:http://jsfiddle.net/oyge1huj/

var content = '<div id="content-wrapper">' +
    '<div class="title"><h2>' + markers[i][0] + '</h2></div>' +
    '<div class="separator"></div>' +
    '<p><label><i class="fa fa-home"></i>Address: </label>' + markers[i][1] + '</p>' +
    '<p><label><i class="fa fa-phone"></i>Phone: </label>' + markers[i][2] + '</p>' +
    '<p><label><i class="fa fa-map-marker"></i>GPS: </label>' + markers[i][4] + ', ' + markers[i][3] + '</p>' +
    '</div>';

var infoWindowContent = document.createElement("div");

infoWindowContent.setAttribute("id", "content");
infoWindowContent.innerHTML = content;

var streetview = document.createElement("div");

streetview.setAttribute("id", "street");
streetview.style.width = "100%";
streetview.style.height = "100px";

infoWindowContent.appendChild(streetview);

var infowindow = new google.maps.InfoWindow({
    content: infoWindowContent
});

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

function openInfoWindow(marker) {
    pin.set("position", marker.getPosition());
    infowindow.open(map, marker);
    //map.setCenter(marker.getPosition());
}

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);
});

0 个答案:

没有答案