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的部分，并添加标记，我希望街景锚标签初始化街景视图。

我在文档中找到了一些选项，例如通过点击外部链接将地图置于标记中心，但无法找到任何可以点击的街景视图。

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中的任何，这个处理程序就会运行，这不是您要求的。为了实现您想要的（InfoBox内“街景”链接上的事件处理程序），我不得不使用一点jQuery。这是更新的小提琴： DEMO

在这里，您将InfoBox的内容创建为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类并在该类下移动所有样式定义），但它可以完成工作。我相信你可以把它清理干净，让它变得有价值。）

google maps api v3触发链接点击街道视图

1 个答案: