jquery - Safari 切换 map 和街景 View 不会在点击时触发

Question

好吧，我将尽我所能解释这一点。

我的网站有一个切换 map View 和街景选项卡部分，它适用于除移动或平板设备上的 safari 之外的所有浏览器。

下面两张图是它工作时的样子:

所以这就是它通常看起来的样子，我向您展示它的工作原理并没有太多用处，但可以让您了解我正在尝试做什么。

下一张图片是当您使用 Safari 在 iPad 或 iPhone 上单击“街景”时的效果。请注意，它确实适用于其他浏览器。

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

我尝试过的事情:

1) 我认为这可能是由于悬停效果所致，但我已将其从 css 中删除并且没有任何效果。2) 我还移除了 Canvas 上的地基，看看它的顶部是否有一个隐藏的元素阻止它做它应该做的事情!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);

如您所见，我已将 click 和 touchend 添加到 on 函数中。哦，顺便说一句，我还通过一个警报功能来查看它是否被点击。它让我难以置信!提醒我输入的一些文字。

这是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

这适用于对切换 map 和街景 View 有疑问的任何人。这实际上花了我 4 天的时间才弄清楚。

这是解决我的问题所需的 jquery: var 初始化 = 函数 () { var streetView = new google.maps.LatLng({{$data->lat.', '.$data->long}}); var panoramaOptions = { 位置:街景， 观点:{ 标题:165， 间距:0 }, 缩放:1， 缩放控制:假， 滚轮:假 }; var myPano = new google.maps.StreetViewPanorama( document.getElementById('街道 Canvas '), 全景选项)； myPano.setVisible(true); };

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

        setTimeout(initialize, 300);

    });

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