Recording vue to realize the positioning function of Web-side to obtain latitude and longitude

First of all, what I need here is to get the longitude and latitude of the current user.
After numerous tests, the api of the map was used, and finally it was js APi of Gao de.
Don't talk too much nonsense, just go to the code.

First, it is introduced in index.html.

<script type="text/javascript" src="https://Webapi.amap.com/maps? V = 1.4.15 & key = key "> </script> of your application

Then go to the page you need to get and start writing. I'll test it here, so there's only one App.vue file.

It seems very detailed.
Accurate location can be achieved by calling the api.

function onComplete(data){
 // This is what happens when location services are allowed. Here I get the information I want directly.
}
function onError(data){
  // Here's what happens when the acquisition fails to locate.
  // Here I set up to enable ip positioning after acquisition failure
  // But a little bit, it is not very accurate, and Andrews micro letter tested, can only walk here.
}

The following complete code:

methods: {
    getLocation() {
      let _this = this;
      AMap.plugin('AMap.Geolocation', function () {
        var geolocation = new AMap.Geolocation({
          // Whether to use high-precision positioning, default:
          enableHighAccuracy: true,
          // Set location timeout, default: infinite
          timeout: 5000,
        })
        geolocation.getCurrentPosition()
        AMap.event.addListener(geolocation, 'complete', onComplete);
        AMap.event.addListener(geolocation, 'error', onError);
        // data is the specific location information
        function onComplete(data) {
          console.log('Specific location information',data)
        }
        function onError(data) {
          // Failed to enable ip positioning
          AMap.plugin('AMap.CitySearch', function () {
            var citySearch = new AMap.CitySearch();
            citySearch.getLocalCity(function (status, result) {
              if (status === 'complete' && result.info === 'OK') {
                  // result is the information of the current city.
                console.log('adopt ip Get the current city:', result)
              }
            })
          })
        }
      })
    },
  },
  created () {
    // This is to call the precise location, call the ip location, according to the actual situation can be rewritten.
    this.getLocation();
 }

After testing:

ios models can be positioned perfectly in the browser with built-in browser or other browsers.

In the browser, the location of the browser is failed to convert to ip positioning, slightly deviate, but not super large, but can be accurately positioned in other browsers.

The specific reasons have not been solved yet. I hope the big boys can put forward suggestions and opinions.

I have a chicken dish. I hope to get acquainted with all kinds of big guys.~~~~

In addition, we can learn from each other. Here is a group of bars, which can discuss both experience and technology, and boast about it.

Tags: Javascript Amap Vue iOS

Posted on Mon, 07 Oct 2019 09:25:07 -0700 by berry05