2

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

有人看到我缺少的东西吗？看起来它真的应该工作。我确实收到关于“资源解释为图像但使用 MIME 类型应用程序/八位字节流传输”的警告，但就像我说的那样，我可以看到图像进入浏览器。

  // 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>
4

1 回答 1

1

我看到2个问题。

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

2的可能解决方案。

  1. 不要使用 ID，classNames 或其他属性足以选择元素并且不需要唯一
  2. 创建一个真正的克隆而不是使用 innerHTML 
         var html = $(选择器).clone(true);
  3. 使用上下文参数访问克隆内部的节点（而不是原始元素内部） 
         pano = new google.maps.StreetViewPanorama($(panSelector,html)[0],
                                                  全景选项）；
于 2013-02-13T00:15:52.263 回答