仅在移动设备上打开Goog​​le地图应用

Question

我的网站有Google地图。

<div id="map"></div>

这就是我网站上的div，即地图。

function initMap() {
    const mapContainer = document.getElementById('map');
    const location = {lat: 44.116395, lng: 27.261184};

    const map = new google.maps.Map(mapContainer, {
        zoom: 17,
        center: location
    });

    const marker = new google.maps.Marker({
        position: location,
        map
    });
}

这是javascript文件中的地图代码。 当网站通过计算机打开时，我不希望发生任何事情。当手机或平板电脑打开网站时，我想当有人点击地图时，谷歌地图应用程序将被打开。我怎样才能做到这一点？

Answer 1

您可以在jquery中使用媒体查询来确定用户是否使用移动设备。

在您的情况下，我建议使用matchmedia查询：https://www.w3schools.com/jsref/met_win_matchmedia.asp

if (window.matchMedia("(max-width: 700px)").matches) {
    /* The viewport is less than, or equal to, 700 pixels wide */
} else {
    /* The viewport is greater than 700 pixels wide */
}

如果不是移动设备，请将“initMap（）”代码更改为不返回地图的内容，并将地图移除。