WeChat's H5 page calls third-party location navigation

This time I will bring you the Navigation of WeChat’s H5 page calling third-party location. What are the precautions for WeChat H5 page to call third-party location navigation? The following is a practical case. Let’s take a look.

WeChat h5 page launches third-party navigation application

Need to prepare:

1. Public account certified by WeChat

2. Have registered domain names

Background: WeChat public account clicks the menu bar to jump to the h5 page, you need to use the navigation function

Requirements: When the user When you click the navigation button, jump to the third-party app for navigation

Reference: WeChat public account development documentation

Steps:

Introduce the following JS to the page that needs to call the JS interface File, (supports https): http://res.wx.qq.com/cgi-bin/index?lang=zh_CN

The signature permission of jssdk. This permission is provided by the backend. The front end only needs Just inject the signature permission into wx.config. I believe this step can be saved if you have used other WeChat APIs.

       "
       wx.config({
           debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
           appId: '', // 必填，公众号的唯一标识
           timestamp: , // 必填，生成签名的时间戳
           nonceStr: '', // 必填，生成签名的随机串
           signature: '',// 必填，签名
           jsApiList: ['openLocation'] // 必填，需要使用的JS接口列表 这里填写需要用到的微信api openlocation为使用微信内置地图查看位置接口
       });
       "

What you need to pay attention to here is that debug should be changed to false after going online, and that in jsApiList Fill in the interface you want to use, otherwise it will have no effect

Register the click event for the navigation button, call the wx.openLocation method

$('.btn2').click(function () {
            wx.openLocation({
                latitude: 22.545538, // 纬度，浮点数，范围为90 ~ -90
                longitude: 114.054565, // 经度，浮点数，范围为180 ~ -180。
                name: '这里填写位置名', // 位置名
                address: '位置名的详情说明', // 地址详情说明
                scale: 10, // 地图缩放级别,整形值,范围从1~28。默认为最大
            });
        })

After clicking, it will jump to the WeChat location Page, click the navigation in the lower right corner to pull up the third-party navigation!

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website!

Recommended reading:

Front-end technology realizes text texture overlay

h5 realizes multi-image preview uploading and click-to-drag Drag control

The above is the detailed content of WeChat's H5 page calls third-party location navigation. For more information, please follow other related articles on the PHP Chinese website!