3

我最近是 google map api v3 的新手，想问一下是否有什么方法可以通过单击我的 infoBox 中的链接来触发街景模式。

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

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。

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

4

1 回答 1

1

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

这是一个 JSFiddle 来演示它是如何完成的。演示

基本上，您可以像这样编写点击处理程序：

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

在这里，您将 InfoBox 的内容创建为 jQuery 元素，因此您可以将click处理程序绑定到“街景”链接。（我给#swl了那个链接一个 id，所以我可以find用 jQuery。）

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 类并将所有样式定义移动到该类下），但它可以完成工作。我相信你可以清理它并使其值得生产:)

于 2013-11-14T14:59:30.600 回答