Question

好吧，所以我会尽力解释这个问题。

我的网站有一个切换地图视图和街景标签部分，除了手机或平板电脑上的Safari之外，它还适用于每一个浏览器。

接下来的两张图片是它工作时的样子： enter image description here

enter image description here

所以这通常看起来并没有太多使用我向你展示它的工作但是让你知道我正在尝试做什么。

下一张图片是您在ipad或iphone上使用safari点击“streetview”时的图片。请注意，它适用于其他浏览器。

enter image description here

但是，如果我再次按下街景切换按钮，那么它可以正常工作......

我尝试过的事情：

1）我认为这可能是由于悬停效应，但是我已经从css中删除了它并且没有任何效果。 2）我还从画布上移除了基础，看看它顶部是否有一个隐藏元素，阻止它做它应该做的事情！ 3）我也搞砸了没有运气的触摸事件，因为据我所知，safari还不支持这些。

我在这方面做得更多，但是我不记得了！

Jquery：

    var initialize = function () {
var streetView = new google.maps.LatLng( {{$data->lat .' , '.$data->long}} );
var panoramaOptions = {
  position: streetView,
  pov: {
    heading: 165,
    pitch: 0
  },
  zoom: 1,
  zoomControl:false,
  scrollwheel: false
};
var myPano = new google.maps.StreetViewPanorama(
    document.getElementById('street-canvas'),
    panoramaOptions);
myPano.setVisible(true);
};

$('.street-canvas-btn').on('click touchend', initialize ).preventDefault();

google.maps.event.addDomListener(window, 'load', initialize);

如你所见，我已经为on功能添加了click和touchend。哦，顺便说一下，我还通过一个警报功能来看看它是否被点击它被点击。我不相信！警告我输入的一些文字。

这是html：

<div class="property-single__map">

<div class="row">
    <div class="columns large-offset-3 large-6 property-single__map__col">

        <!-- Tab Heads -->
        <dl class="tabs tabs--maps" data-tab>
          <dd class="active map-canvas"><a class="br-left" href="#panel1">Map View</a></dd>
          <dd><a href="#panel2" class="br-right street-canvas-btn">Street View</a></dd>
        </dl>   
        <!--\ Tab Heads -->

    </div>
</div>

<!-- Tab Content -->
<div class="tabs-content tabs__content--maps">
  <div class="content active" id="panel1">
    <aside>
        {{ $map['html'] }}
    </aside>
    <div class="google-map" data-lat="{{{$data->lat}}}" data-long="{{{$data->long}}}"></div>
  </div>
  <div class="content" id="panel2">
    <aside>
        <div id="street-canvas" style="width: 100%; height: 480px; margin: 0px; padding: 0px;"></div>
    </aside>
    <div class="google-map" data-lat="{{{$data->lat}}}" data-long="{{{$data->long}}}"></div>
  </div>
</div>

我认为这是我可以提供给你的尽可能多的信息，所以如果你以前遇到过这个问题，请告诉我，如果你有解决方案，因为它已经让我精神振作！

非常感谢

Answer 1

这适用于任何有切换地图和街景视图问题的人。这字面上花了我4天的时间来弄明白。

以下是解决我的问题所需的jquery： var initialize = function（）{ var streetView = new google.maps.LatLng（{{$ data-＆gt; lat。'，'。$ data-＆gt; long}}）; var panoramaOptions = { 位置：streetView， pov：{ 标题：165，音高：0 }，缩放：1， zoomControl可：假的， scrollwheel：false }; var myPano = new google.maps.StreetViewPanorama（的document.getElementById（ '街头画布'）， panoramaOptions）; myPano.setVisible（真）; };

    $('.street-canvas-btn').on('click touchend', function (event, tab) {

        setTimeout(initialize, 300);

    });

基本上发生的事情是setTimeout让你的设备有更多的时间来完成你已经要求它做的所有其他事情。这允许在触摸发生之后然后执行该功能。

Safari切换地图和街景视图不会在点击时触发

1 个答案: