How to call third-party location navigation on WeChat HTML5 page

This article mainly introduces relevant information to you about the example of calling third-party location navigation on WeChat HTML5 page. The editor thinks it is quite good. Now I will share it with you and give you a reference. I hope it can help you.

Need to prepare:

1. Public account certified by WeChat

2. Have a registered domain name

Background: WeChat public account clicks the menu bar to jump to the h5 page, which requires the navigation function

Requirement: When the user clicks the navigation button, jump to the third-party app for navigation

Reference: WeChat public account development document

Steps:

Introduce the following JS file on the page that needs to call the JS interface, (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 to inject the signature permission into wx.config. I believe it can be used This step of passing other WeChat APIs can be omitted

       "
       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 must be changed to false after going online, and the interface you want to use must be filled in the jsApiList, otherwise it will have no effect

Register a click event for the navigation button and 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!

5. WeChat uses the coordinates of gcj02, and some maps use the coordinates of wgs84. If the error is relatively large, you can consider whether it is a problem with the incoming longitude and latitude. For details, you can ask Du Niang

The above is the detailed content of How to call third-party location navigation on WeChat HTML5 page. For more information, please follow other related articles on the PHP Chinese website!