[Original] reveal the secrets of the hybrid mode of WeChat official account and HTML 5 -- JSSDK obtains the geographical location and the hybrid mode jssdk

[Original] revealing the secrets of the hybrid mode of the Public Account and HTML 5 -- JSSDK obtains the geographical location and the hybrid mode jssdk

Public Account and HTML 5 mixed mode secrets 1-how to deploy JSSDK public account and HTML 5 mixed mode secrets 2-share photos in Mobile album

 

JSSDK provides developers with two location API services: obtaining geographical locations and using built-in maps to view locations.

The previous practical demonstration methods are used below. Create a location. js file and add the location API for "wxJSSDK". The Code is as follows:

 

01 wxJSSDK. location = function (locationApi) {02 if (wxJSSDK. isReady) {// wxJSSDK. isReady check whether JSSDK Initialization is complete 03 if (locationApi) {04 // other code is omitted 05} else {06 console. log ("configuration parameters missing"); 07} 08} else {09 console. log ("sorry, wx has not been initialized. Please wait until the wx Initialization is complete and then call the location interface server 10. "); 11} 12}

Copy A jssdkenvironment and create an index.html file. The structure is 7.1.

 

 

Figure 7.1 file structure

7.1.1 obtain the geographic location

The first is the "get geographic location" information, named "getLocation". Official sample code:

 

01 wx. getLocation ({02 success: function (res) {// 1 parameter, Location Resource Information 03 var latitude = res. latitude; // latitude, floating point number, range: 90 ~ -9004 var longpolling = res. longpolling; // longitude, floating point number, range: 180 ~ -180. 05 var speed = res. speed; // speed, in meters/per second 06 var accuracy = res. accuracy; // location precision 07} 08}); at location. in js, encapsulate "getLocation" as follows: 01 wxJSSDK. location = function (locationApi) {02 if (wxJSSDK. isReady) {// wxJSSDK. isReady check whether JSSDK Initialization is complete 03 if (locationApi) {04 locationApi. getLocation & wx. getLocation ({// obtain the geographic location interface 05 success: function (res) {06 locationApi. getLocation. success & 07 locationApi. getLocation. success (res); 08} 09}); 10} else {11 console. log ("configuration parameters missing"); 12} 13} else {14 console. log ("sorry, wx has not been initialized. Please wait until the wx Initialization is complete, and then call the location interface server 15. "); 16} 17}

In the index.html file, add the "get location" button and display the obtained location information. The code structure is as follows:

 

 

01 <! DOCTYPEhtml> 02 

Remember to add the "getLocation" API permission in the JSSDK configuration environment.
 
[Code description]
After the location of "getLocation" is successful, information about "latitude", "longitude", "Speed", and "location accuracy" will be returned. After you click "Get location", a message is displayed, as shown in Figure 7.2. Result 7.3 is displayed after the information is obtained.

Figure 7.2 JSSDK location information prompt
 
Figure 7.3 successful location service information
From
 
 
Public Account and HTML 5 mixed mode secrets 1-how to deploy JSSDK public account and HTML 5 mixed mode secrets 2-share photos in Mobile album