[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

Source: Internet
Author: User

[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

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.