Example of calling third-party location navigation on WeChat html5 page, html5 third-party

Example of calling third-party location navigation on the html5 page, html5 third-party

Pull third-party navigation applications from the h5 page

To be prepared:

1. Authenticated public account
2. Domain names that have been filed

Background: The public account is clicked to jump to the h5 page, and the navigation function is required.

Requirement: when a user clicks the navigation button, the user jumps to a third-party app for navigation.

Reference: public account development document

Steps:

Introduce the following JS file in the page that needs to call JS interface (Support https): http://res.wx.qq.com/cgi-bin/index? Lang = zh_CN

The signature permission of jssdk is provided by the background. The front-end only needs to inject the signature permission to wx. config. I believe this step can be saved when other APIs are used.

'''Wx. config ({debug: true, // enable the debugging mode. The returned values of all called APIs are displayed in the client alert. To view the input parameters, you can open them on the pc, the parameter information is output through log and printed only on the pc end. AppId: '', // required. The unique identifier timestamp:, // required. The timestamp of the generated signature is nonceStr:''. // required, sign the random string signature: '', // required. jsApiList: ['openlocation'] // required, list of JS interfaces to be used. Enter the required api openlocation to use the built-in map to view the location interface });'''

Note that debug should be changed to false after going online, and the interface you want to use should be filled in jsApiList, otherwise it will not work.

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

$ ('. Btn2'). click (function () {wx. openLocation ({latitude: 22.545538, // latitude, floating point number, range: 90 ~ -90 longpolling: 114.054565, // longitude, floating point number, range: 180 ~ -180. Name: 'fill in location name', // address: 'detailed description of location name', // address description scale: 10, // map zoom level, integer value, ranging from 1 ~ 28. Max by default });})

After clicking it, you will jump to the location page. Click the navigation in the lower right corner to pull the third-party navigation!

5. gcj02 coordinates are used, while wgs84 coordinates are used for some maps. If there is a large error, you can consider whether the introduced longitude and latitude problems exist. For details, you can ask du Niang.

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.