2018-08-09微信公众号里面的页面如何实现点击导航就跳转到手机已经安装的地图APP里 , 调用微信的自有方式打开地图APP

您现在的位置是: 首页 > WEB前端 > 微信公众号里面的页面如何实现点击导航就跳转到手机已经安装的地图APP里 , 调用微信的自有方式打开地图APP

486次阅读

微信公众号里面的页面如何实现点击导航就跳转到手机已经安装的地图APP里 , 调用微信的自有方式打开地图APP, 点击导航按钮后进入百度地图app,如果手机没有安装的话,就跳转到AppStore

主要示例代码如下:

 

<h3 id="menu-location">地理位置接口</h3>
<span class="desc">使用微信内置地图查看位置接口</span>
<button class="btn btn_primary" id="openLocation">openLocation</button>
<span class="desc">获取地理位置接口</span>
<button class="btn btn_primary" id="getLocation">getLocation</button>

<script>
    //这里的配置详细可以看帮助
    wx.config({
        debug: false,
        appId: 'wxf8b4f85f3a794e77',
        timestamp: 1522828107,
        nonceStr: 'jnShs2vgPDo6fwlY',
        signature: '1432d01387adacbca1ce0a4d6ecf3f62363e0309',
        jsApiList: [
            // 所有要调用的 API 都要加到这个列表中
            'openLocation',
            'getLocation',
        ]
    });
    wx.ready(function () {
        // 在这里调用 API
        // 7 地理位置接口
        // 7.1 查看地理位置
        document.querySelector('#openLocation').onclick = function () {
            wx.openLocation({
                latitude: 23.099994,
                longitude: 113.324520,
                name: 'TIT 创意园',
                address: '广州市海珠区新港中路 397 号',
                scale: 14,
                infoUrl: 'http://weixin.qq.com'
            });
        };
        // 7.2 获取当前地理位置
        document.querySelector('#getLocation').onclick = function () {
            wx.getLocation({
                success: function (res) {
                    alert(JSON.stringify(res));
                },
                cancel: function (res) {
                    alert('用户拒绝授权获取地理位置');
                }
            });
        };
    });
</script>


效果图:

微信公众号地图导航 , 微信公众号使用手机app导航 , 调用微信的自有方式打开地图APP