How to use JSSDK to obtain Geographic location in Web pages by HTML5+jQuery
In this issue, the editor will bring you about how HTML5+jQuery uses JSSDK to obtain geographical location in the web page. The article is rich in content and analyzes and describes for you from a professional point of view. I hope you can get something after reading this article.
Copy a JSSDK environment and create an index.html file.
In location.js, encapsulate the "getLocation" interface as follows:
01 wxJSSDK.location = function (locationApi) {02 if (wxJSSDK.isReady) {/ / wxJSSDK.isReady check whether Wechat JSSDK is initialized 03 if (locationApi) {04 locationApi.getLocation & & wx.getLocation ({/ / get geolocation API 05 success: function (res) {06 LocationApi.getLocation.success & 07 locationApi.getLocation.success (res) 08} 09}); 10} else {11 console.log ("missing configuration parameters"); 12} 13} else {14 console.log ("Sorry, wx is not initialized, please wait for wx initialization, and then take oral 15 services at the calling location.") ; 16} 17}
In the index.html file, add the "get Geographic location" button, and display the location information after acquisition. The code structure is as follows:
01 02 03 04 05 07 Chapter 7 Section 7.1 location Operation Interface 08 09 10 11 12 13 14 15 16 17 18 19 input {20 width: 100% 21 padding: 0.2 62c462 22 background-color: # 5eb95e political 23 font-size: 1.4 emscape 24 background-image: linear-gradient (to bottom, # 62c462, # 57a957); 25 background-repeat: repeat-x;26 color: # ffffff;27 text-align: center 28 text-shadow: 0-1px 0 rgba (0,0,0,0.25); 29 border-radius: 0.3emscape 30} 31 # info {32 border-left: 3px solid#03a9f4;33 background-color: # 5eb95escape 34 color: # ffffff;35 border-radius: 0.3em 36 text-shadow: 0-1px 0 rgba (0,0,0,0.25); 37} 38 39 40 41:) 42 position operator interface! 43 44
Latitude: no 45
Longitude: none 46
Speed: no 47
Position accuracy: no 48 49 50 51
Then add the response event to the location.js, as follows:
01 _ window.onload = function () {02 var latitude,longitude, speed, accuracy / / location information initial variable 03 $("# getLocation") .click (function () {/ / get geolocation interface 04 wxJSSDK.location ({05 getLocation: {06 success:function (res) {07 latitude = res.latitude) / / Latitude, floating point number, range is 90 ~-9008 $("# latitude") .html (latitude); 09 longitude = res.longitude; / / longitude, floating point number, range is 180 ~-180. 10 $("# longitude") .html (longitude); 11 speed = res.speed; / / speed, 12 $("# speed") .html (speed) in meters per second; 13 accuracy = res.accuracy / / position accuracy 14 $("# accuracy") .html (accuracy); 15} 16} 17}); 18}); 19}
Finally, remember to add the permission of "getLocation" API to the configuration environment of JSSDK.
This is how the HTML5+jQuery shared by the editor uses JSSDK to get the geographical location on the web page. If you happen to have similar doubts, you might as well refer to the above analysis to understand. If you want to know more about it, you are welcome to follow the industry information channel.
