Question

我正在使用googlemaps v3 / ASP.net MVC / Knockout进行位置选择屏幕。我无法在infowindow获得街景图片。我尝试了几个不同的例子。我可以看到图像被拉下来（可在浏览器资源中查看），但不会显示。

有没有人看到我失踪的东西？它看起来应该是有效的。我收到一条关于“资源被解释为图像但是使用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的部分。用Knockout重复。

        @*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>

Answer 1

我看到了2个问题。

在添加domready-event
（问题更多）您将infoWindow的内容设置为DOM中已存在的元素的innerHTML，结果将是元素的ID不再唯一。我想全景图将应用于DOM中已存在的隐藏元素，而不是应用于infoWindow内容的“克隆”。

2的可能解决方案。

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

使用context-argument访问克隆内的节点（而不是原始元素内部）

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

在infowindow中嵌入街景图片 - Googlemaps v3

1 个答案: