在infowindow中嵌入街景图片 - Google地图v3

我正在使用googlemaps v3/ASP.net MVC/Knockout作为位置选择屏幕。 infowindow中无法获取街景图片。我已经尝试了几个不同的例子。我可以看到图像被拉下（在浏览器资源中可见），但不会显示。在infowindow中嵌入街景图片 - Google地图v3

有没有人看到我失踪的东西？它真的好像应该工作。我确实收到了关于“资源解释为图像但是使用MIME类型application/octet-stream传输”的警告，但正如我所说的，我可以看到将图像传送给浏览器。

// Function for creating a marker and adding to myMarkers array 
    function addMarker(location, id) { 
    var selector = "#hiddenBranch" + id; 
    var html = $(selector)[0].innerHTML; 

    var panSelector = "PanId" + id; 

    var marker = new google.maps.Marker({ 
     position: location, 
     distance: google.maps.geometry.spherical.computeDistanceBetween(location, centerCoords), 
    }); 

    marker.setValues({id: id}) 

    google.maps.event.addListener(marker, "click", function() { 
     if (infowindow) infowindow.close(); 
     infowindow = new google.maps.InfoWindow({ 
     content: '' 
     }); 
     infowindow.setContent(html); 
     infowindow.open(map, marker); 

     var panoramaOptions = { 
     position: location, 
     pov: { 
      heading: 34, 
      pitch: 10, 
      zoom: 1 
     } 
     }; 

     var pano = null; 
     google.maps.event.addListener(infowindow,'domready', function() { 
     pano = new google.maps.StreetViewPanorama(document.getElementById(panSelector), panoramaOptions); 
     pano.bindTo("position", marker); 
     pano.setVisible(true); 
     }); 

    }); 

    myMarkers.push(marker); 
    }

html的部分。重复与淘汰赛。

 @*The content of this div will be displayed in infowindow*@ 
    <div style="display:none"> 
     <div data-bind="attr: {'id': HiddenDivId}"> 
     <div style="width:100px; height:100px" data-bind="attr: {'id': HiddenPanDivId}"> 

     </div> 
     <input data-bind="value: Id" class="hiddenBranchId" type="hidden" value=""> 
     <input data-bind="value: DirectionLink" class="hiddenDirectionLink" type="hidden" value=""> 
     <ul> 
      <li><h2></h2></li> 
      <li data-bind="text: BranchName"></li> 
      <li data-bind="text: StreetAddress"></li> 
      <li><span data-bind="text: City"></span>, <span data-bind="text: Zip"></span> <span data-bind="text: State"></span></li> 
      <li><a href='#' class="branchSelectLink" onclick=selectBranch(this)>Select</a> | <a href="#" onclick=openDirectionWindow(this)>Directions here</a></li> 
     </ul> 
     </div> 
    </div>

来源

2013-02-12 Ricka

你放置街景的div的大小是多少？不知道它是否会有所帮助，但是，[在infowindows中使用Streetview的工作示例]（http://www.geocodezip.com/v3_StreetViewInInfoWindowB.html） – geocodezip 2013-02-13 00:15:36

我看到2个问题。

你打开信息窗口您添加domready中事件之前
（更多的问题）您设置的信息窗口到已经在DOM内部存在的元素的innerHTML的内容，其结果将是该元素的ID不再是唯一的。我猜全景图将应用于已经存在于DOM内的隐藏元素，而不是应用于infoWindow内容的“克隆”。为

可能的解决方案2.

不要使用标识，类名或其他属性足以选择元素且并不需要是唯一
创建一个真正的克隆，而不是使用的innerHTML
```
  var html = $(selector).clone(true);
```

使用的上下文参数的访问节点的克隆内（而不是原来的元件内部）

  pano = new google.maps.StreetViewPanorama($(panSelector,html)[0], 
                panoramaOptions);

来源

2013-02-13 00:15:52

您真棒。感谢您抽出宝贵时间让我平静下来。我甚至没有考虑到我在复制身份证的事实。我将选择器更改为一个类...并且效果很好。再次感谢。 – Ricka 2013-02-13 17:17:11

在infowindow中嵌入街景图片 - Google地图v3

回答

相关问题