谷歌地图api v3触发链接点击街景

Question

我最近在谷歌地图api v3新，并想问我是否有任何方式可以触发街景模式只需点击我的信息框中的链接。

到目前为止，这是我的代码：

var map; 
var marker; 
var infowindow; 

function HomeControl(controlDiv, map) {controlDiv.style.margin = '50px 0 0 0';} 

function initialize() { 
    var location = new google.maps.LatLng(37.78391, -122.407157); 
    var mapOptions = { 
         center: location, 
         zoom: 18, 
         panControl: false, 
         scrollwheel: false, 
         zoomControl: false, 
         scaleControl: true, 
         streetViewControl: true, 
         streetViewControlOptions: { 
           mapTypeControl: true, 
           mapTypeId: google.maps.MapTypeId.ROADMAP }; 
         map = new google.maps.Map(document.getElementById('map-canvas'), 
             mapOptions); 

         marker = new google.maps.Marker({position: map.getCenter(), 
            map: map, 
            title: 'Click to zoom' 
         }); 

         var boxText = document.createElement("div"); 
         boxText.style.cssText = "margin-top: 26px; background: url('inc/images/infowindow-overlay.png') repeat left top; padding: 15px 20px;"; 
           boxText.innerHTML = "<span class='pointing-arrow'></span><h2 class='adress-title'>San Francisco Center</h2><a href='#'>Centre Website</a><a href='#'>Street View</a>"; 

         var myOptions = { 
            content: boxText, 
            disableAutoPan: false, 
            maxWidth: 0, 
            pixelOffset: new google.maps.Size(-5, 0), 
            zIndex: null, 
            boxStyle: {width: "280px"} 
           }; 


           map = new google.maps.Map(document.getElementById("map-canvas"), 
           mapOptions); 
           var image = 'inc/images/westfield-marker-logo.png'; 
           marker = new google.maps.Marker({ 
            position: location, 
            map: map, 
            title: 'Westfield HQ', 
            draggable: true, 
            icon: image 
           }); 

           //infowindow.open(map,marker); 
           google.maps.event.addListener(marker, 'click', function() { 
            map.setZoom(18); 
            map.setCenter(marker.getPosition()); 
            ib.open(map, this); 
           }); 

           var ib = new InfoBox(myOptions); 
          } 
          google.maps.event.addDomListener(window, 'load', initialize); 

现在我想要做的是，在我初始化boxText，并添加加价的部分，我想街景锚标记初始化onclick街景。

我在文档中找到了一些选项，例如通过单击外部链接将地图定位到标记，但找不到任何可以在点击时激活街景的选项。

Answer 1

处理InfoBox（或InfoWindow）内的元素上的点击事件的方式有点复杂。

下面是一个JSFiddle来演示它是如何完成的。 DEMO

基本上，你写你的点击处理程序是这样的：

google.maps.event.addDomListener(ib.content_,'click',(function(marker) { 
    return function() { 
     openStreetView(); // Here's where you activate the StreetViewPanorama 
    } 
})(marker)); 

我不包括有关如何通过代码激活的StreetViewPanorama，因为有大量的信息在Google Maps JS API Docs这个问题的细节。

编辑

我才意识到，这个处理程序运行任何时候你点击它不完全是你问的信息框里面什么。为了实现你想要的东西（InfoBox中'街景'链接上的事件处理程序），我必须使用一个小小的jQuery。下面是更新小提琴：DEMO

在这里，你创建信息框的内容作为一个jQuery元素，所以你可以在click处理程序绑定到“街景视图”的链接。 （我给#swl作为一个ID链接，所以我可以用jQuery find它。）

var boxObj = $("<div style='margin-top: 26px; background: url('inc/images/infowindow-overlay.png') repeat left top; padding: 15px 20px;'><span class='pointing-arrow'></span><h2 class='adress-title'>San Francisco Center</h2><a href='#'>Centre Website</a><a href='#' id='swl'>Street View</a></div>"); 

boxObj.find('#swl').on('click', function(){ 
    openStreetView(); 
}); 

这不是最漂亮的代码（你应该创建CSS类和移动该类下的所有样式定义），但它完成工作。我敢肯定，你可以清理它，并使其生产值得:)