1, Thinking of positioning

Because the content and location of Bi's idea must be inseparable, after configuring the server, the first attempt is to locate html and obtain the user's location information from the web page. This function was supposed to be easy, because when you visit a mobile web page, you often get the prompt that you want to get your location. In fact, it's been stuck here for two or three days. The code is on the one hand, and on the other hand, it's some details of ideas.

2, Code implementation of positioning

There are two main methods to locate. One is to use the location interface of html5, and the other is to use the interface of map software.

For the first method, you need to use navigator geolocation. Getcurrentposition method. This method uses the location service of the mobile phone and puts the code first:

function getLocation(){
    var options = {
      enableHighAccuracy: true,
      timeout: 5000,
      maximumAge: 0
    };
    if (navigator.geolocation){ //Get coordinate address with browser
      navigator.geolocation.getCurrentPosition(showPosition,showError,options);
    }else{
      alert("The browser does not support geolocation.");
    }
  }

  //Get browser GPS successfully
  function showPosition(position){
    var x = position.coords.longitude; //longitude
    var y = position.coords.latitude;//latitude
    //alert(x+" "+y);
    transTypesParam = getTransType(position.coords.accuracy);
    showMap(x, y, true);
  }

  function showError(error){
    alert('Location failed:'+this.getStatus());
  }

The most important one is the following line of code:

navigator.geolocation.getCurrentPosition(showPosition,showError,options);

This interface has three parameter items. It will select the corresponding callback function according to whether to call the geographical location successfully. When it succeeds, it will select the showPosition function, and when it fails, it will call the showError function. option is to set some details of the call, including precision and so on.
When the positioning is successful, the longitude and latitude can be obtained by using the successful parameters, and then the geographical location can be put into the display interface of the map software.
The advantage of this method is accuracy, but the first requirement is that the server must be https protocol, which is stuck. Because the configured server is http protocol, the security can not meet the requirements, so it is necessary to configure https for the server and dig another hole. And according to the information on the Internet, Google browser may fail to locate due to irresistible factors.

The other is to use the interface of map software. Any mainstream map software, such as Baidu map and Gaode map, has this service. First go to the official to apply for a key, and then add the referenced code to the web page:

<script type="text/javascript" src="http://api. map. baidu. com/api? V = 3.0 & AK = requested key "> < / script >
<script type="text/javascript" src="http://api. map. baidu. com/api? V = 1.0 & type = webgl & AK = requested key "> < / script >

Here I quote two, which are also the pits I stepped on at the beginning. Because the interface of Baidu map is adopted, baidu map has been used by everyone. Now Baidu map can be browsed in 3D. WebGL technology is needed for 3D browsing. For this technology, the interface later developed by Baidu map is the second one above. Now the development document of the official website also recommends this one, because it is upward compatible. The first one is the latest version of the interface that does not support WebGL. Now the codes found on Baidu are of this interface, because most codes do not use 3D display, and 2D is enough. The actual test found that it is best to use 2D. Although 3D appears tall when displaying the map, the effect is unspeakable. The implementation code is as follows:

var map = new BMapGL.Map("Displays the of the map container ID"); 
  //var point = new BMapGL.Point(116.331398,39.897445);
  var geolocation = new BMap.Geolocation();
  geolocation.getCurrentPosition(function(r){
    if(this.getStatus() == BMAP_STATUS_SUCCESS){
      var mk = new BMapGL.Marker(r.point);
      map.addOverlay(mk);
      map.centerAndZoom(r.point,17);
      map.panTo(r.point);
      //map.setHeading(64.5);   
      //map.setTilt(73);     
    }else {
      alert('failed'+this.getStatus());
    }
  });

This code is to use Baidu interface to obtain the geographical location. This method can be seen to be very concise. First, obtain the html container to display the map, and then all the obtained data should be placed in this container. geolocation is used to obtain the location. Like the previous html5 acquisition idea, it also uses different callback functions according to whether the acquisition is successful. Here, a status code is returned, and the status code is as follows:

//BMAP_STATUS_SUCCESS retrieval succeeded. Corresponding value "0".
//BMAP_STATUS_CITY_LIST city list. Corresponding value "1".
//BMAP_ STATUS_ UNKNOWN_ The location result is unknown. Corresponding value "2".
//BMAP_STATUS_UNKNOWN_ROUTE navigation result unknown. Corresponding value "3".
//BMAP_STATUS_INVALID_KEY illegal key. Corresponding value "4".
//BMAP_STATUS_INVALID_REQUEST illegal request. Corresponding value "5".
//BMAP_STATUS_PERMISSION_DENIED doesn't have permission. Corresponding value "6". (added from 1.1)
//BMAP_STATUS_SERVICE_UNAVAILABLE service is not available. Corresponding value "7". (added from 1.1)
//BMAP_STATUS_TIMEOUT timeout. Corresponding value "8". (added from 1.1)

According to the corresponding status code, we can carry out different operations. In fact, the most important thing is to write the processing method of success. Here you need to refer to the development document of Baidu map. There are many methods in it. Here is also a very basic operation. First, establish a sign point according to the obtained longitude and latitude, and put this sign point on the map, so as to better represent your position. Then move to the position represented by longitude and latitude, and set the display scale. The two lines of comments in the code are the 3D effect displayed by WebGL, It was removed because the display was too fancy.

Personally, I feel that the accuracy of this method is a problem. Several mobile phones have been tested. Two Xiaomi mobile phones can locate successfully after giving the location permission. Here, https is not used, but geographic location can be used. My personal guess is that there are differences in the specific implementation of Xiaomi privacy protection. For the same Xiaomi mobile phone, the browser provided by the system is used. After opening the web page setting, you can see that the location is queried, That is to say, the first time I visit, I ask whether it is allowed, and the installation of other browsers is in an unmodifiable state. There is doubt here, and I don't understand. It also tested a Huawei. Huawei can't use the positioning provided by html regardless of whether the location service is enabled or not. It can only use the baidu interface, but the deviation is particularly large. This is also the case with chrome and Safari on iPad.
I followed up with several more tests. I guess that most browsers are not allowed to obtain the geographical location of http protocol. Xiaomi browser is an example. When using Baidu interface, it is actually a mixed way to obtain the address. It will use gps, wireless network and data network to comprehensively obtain the geographical location. In the case of gps acquisition failure, the remaining two methods are used to supplement. During the test process, For devices that cannot obtain gps, if they are connected to the mobile hotspot, they will be located in Qingdao. Perhaps it is because the mobile traffic card is run by Qingdao. If the connection is changed to home wireless, the location will be immediately converted to Weifang, but there is a great deviation. The current guess is to locate according to the IP address or operator information when the acquisition fails, so the positioning deviation is very large. Of course, these are all guesses, because I don't know the internal details of the interface, and I can't solve it now.

3, Post order modification plan

Now it's basically stuck. Most mobile phones can't locate accurately without gps. The deviation of other methods is outrageous. Therefore, the next step is to move the server, apply for a security certificate and replace the server with https, which may solve the problem.