javascript - 仅在移动设备上打开 Google map 应用

Question

我的网站有 Google map 。

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

这是我网站中的 div，其中有 map 。

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 文件中的 map 代码。 当电脑打开网站时，我不希望发生任何事情。当通过手机或平板电脑打开网站时，我希望当有人点击 map 时，打开 Google map 应用程序。我怎样才能做到这一点？

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()”代码更改为不返回 map 的代码，然后瞧 - map 消失了。