This is the third day of my participation in the November Gwen Challenge. Check out the details: the last Gwen Challenge 2021

preface

[H5] [H5] [H5] [H5] [H5] [H5] [H5

1. Use the H5 built-in access location

Use navigator.geolocation to determine whether the browser supports it. If not, prompt or use another method.

if(navigator.geolocation) { navigator.geolocation.getCurrentPosition((res)=> { console.log(res); // return latitude and longitude}); }Copy the code

conclusion

1. Some mobile phones and browsers do not support this API, and there will be an error warning, so I feel that this API is a bit weak, and I can not use it.

2. If regional names need to be displayed, js provided by third-party platforms similar to Baidu Map should also be introduced to convert regional names of longitude and latitude.

3. The browser address must be HTTPS, otherwise it is not supported.

Second, use Baidu Map to obtain location

1. Register an account on baidu Map development platform and apply for AK key

2. Reference Baidu map JS in the page (vUE project is referenced in index.html)

<body> <div id="app"></div> <! -- built files will be auto injected --> <script type="text/javascript" SRC = "https://api.map.baidu.com/api?v=2.0&ak=qI3333RVsdret2A9999VC858Q&s=1" > < / script > < / body >Copy the code

3, write the following code in the page (can directly return the longitude and latitude and provincial name) :

Mounted () {// Obtain the current city. Var geolocation=new map.geolocation (); Geolocation. GetCurrentPosition (function (r) {var city = state Richard armitage ddress. City / / that returns the current city currCity = city; })},Copy the code

conclusion

This method can be applied to wechat browser and ordinary browser, basically no problem, no bug, try it! Is the need for the company to apply for AK will be more troublesome, and also need HTTPS to use, relative to the first is very easy to use very effective.

Iii. API of wechat JS-SDK

  1. Log in to wechat platform to obtain the APPID and key

  2. Configure server information, js interface security domain name, web page authorization domain name, etc

  3. Place the configuration information file. TXT under the configured server

  4. View all interface permissions and check whether the user location is obtained

  5. Get time stamps, signatures and so on by calling the interface

    wx.ready(function() { wx.checkJsApi({ jsApiList: [‘getLocation’], success:function(res) { if(! Res. CheckResult. GetLocation) {alert (‘ temporary does not support access interface, the geographical position please upgrade WeChat version! ‘); return; } } }) wx.getLocation({ success: Function (res) {console.log(res)},cancel:function(res) {alert(‘ user is not allowed to authorize location information! ‘); }})})

conclusion

A total of three kinds of H5 geographic position, if not in the public, the central African necessary is recommended to use third party like baidu map, more convenient, and win, at first don’t want to use a third party thing is going to use the H5 own API lane for a long time tried several mobile phones and the browser didn’t succeed, it’s a broken heart.

Finally, thanks for reading ~