Web development practices on WeChat public platform-3. Use JSSDK to obtain the geographical location (HTML5 + jQuery) and jssdkhtml5

Public platform Web development practices-3. Use JSSDK to obtain geographical locations (HTML5 + jQuery) and jssdkhtml5

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

 

Figure 7.1 file structure

In location. js, encapsulate the "getLocation" interface as follows:

 

01wxJSSDK. 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 & 07locationApi. 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 <! DOCTYPE html> 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. The result 7.3 is displayed after the location service is obtained successfully.

Figure 7.2 JSSDK location information prompt

Figure 7.3 successful location service information
Public platform Web development practices-HTML5 + JSSDK hybrid development and decryption

 
Welcome to share this book