HTML5 mobile phone-side positioning

Due to the needs of the project, we have to study the mobile phone side positioning.

Originally thought of IS HTML5 localization, local test down, Android no problem, iOS error, prompt does not support HTTP protocol. Because the back end in addition to latitude and longitude, but also need the city name, such as detailed data, then investigated the German map. The great map really works, and the data you get is comprehensive. Soon debugging finished on the test server, the results unexpectedly found a problem-that is, in the case of 4G, and QQ directly is unable to get the location! Pit Ah, helpless can only convert ideas, using JSSDK positioning and QQ interface respectively to obtain latitude and longitude, through the high-level map query location details, of course, under the browser or direct use of the map to locate. After the project was over, I smiled and said, "What apps are compatible with me?"

Some of the code is attached below:

JSSDK, the interface needs to be signed, this way is skipped.

Self . $loader. Open () window.wx.getLocation ({  //  default is WGS84 GPS coordinates, If you want to return the Mars coordinates directly to Openlocation, you can pass in the ' gcj02 '  function  (res) {    = res.latitude    = res.longitude  },  function  (res) {    //  Close loaderself.    $loader. Close ()    $alert ({text: [' get position failed ']})}  )

QQ interface

function (RetCode, latitude, longitude) {  if (retCode = = = 0) {    = latitude    =  Longitude  else  {self    . $loader. Close () Self    . $alert ({text: [' Get location failed ' ]})  }})

German Map Locator

varMap =NewWindow. Amap.map (' Icenter ') Map.plugin (' Amap.geolocation ',function() {Let geolocation=Newwindow. Amap.geolocation ({enablehighaccuracy:true,//whether to use high precision positioning, default: Truetimeout:10000,//stop positioning after more than 10 seconds, default: Infinitymaximumage:600000,//Locating result Cache 0 MS, default: 0Converttrue,//Auto Offset coordinates, offset by the gold coordinates, default: TrueShowbutton:false,//Show Positioning button, default: TrueButtonposition: ' LB ',//Positioning button Docking position, default: ' LB ', lower left cornerButtonoffset:NewWindow. Amap.pixel (10, 20),//The offset of the position button and the set docking position, default: Pixel (Ten)Showmarker:false,//show point markers in position to location after successful positioning, default: TrueShowcircle:false,//The positioning accuracy range is represented by a circle after successful positioning, by default: TruePantolocation:false,//location to locate after successful positioning as the Map center point, default: TrueZoomtoaccuracy:false       //Adjust the map's field of view after successful positioning to make the location and accuracy range visible in the field of view, default: false}) Map.addcontrol (geolocation) geolocation.getcurrentposition () window. AMap.event.addListener (geolocation,' Complete ', oncomplete)//Back to location informationWindow. AMap.event.addListener (geolocation, ' Error ', OnError)//return location error message  functionOnComplete (Result) { let city= Result.addressComponent.city | |result.addressComponent.province let Lat=Result.position.lat let LNG=RESULT.POSITION.LNG}functionOnError () {//Close LoaderSelf . $loader. Close () self. $alert ({text: [' Get location failed ']})  }})

Get more information

// known point coordinates var New window. Amap.geocoder  (    Status, result) {if (status = = =) Complete ' && result.info = = = ' OK ') {    = result.regeocode.addressComponent.city | | result.regeocode.addressComponent.province  }})

Search nearby Keywords

Window. Amap.service ([' Amap.placesearch '),function () {  varPlacesearch =NewWindow. Amap.placesearch ({//Construct a location query classPagesize:10, PageIndex:1, City:' Citycode ',//City CodeMap:map, Panel:' Panel '  })  //keyword query How many meters near latitude and longitudePlacesearch.searchnearby (' keyword ', [LNG, LAT], 5000,function(status, result) {if(Status = = = ' complete ' && result.info = = = ' OK ') {Let arr=[] Let list=Result.poiList.pois for(Let i = 0; i < list.length; i++) {Arr.push ({title:list[i].name, value:list[i].address, lat:list[i].location.la T, LNG:LIST[I].LOCATION.LNG, distance:list[i].distance})}//SortArr.sort (function(A, b) {returnA.distance >b.distance})}//Close LoaderSelf.refresh =trueSelf . $loader. Close ()})})

The above code for reference only, details contact me, e-mail: [Email protected]

HTML5 mobile phone-side positioning