How to render the current geographic location (province, city) to the page? (Baidu map API)

Effect style

Direct up component:
(there are detailed error reports and solutions later)

1. Open the indet.html File, insert script label into:
(there is a detailed tutorial after obtaining AK value)

<script type="text/javascript" src="http://api.map.baidu . COM / API? V = 2.0 & AK = AK value“></script>

2. In build/ webpack.base.config Add the following code to the. JS file: (same level as entry)

  externals: {
    "BMap": "BMap"
  },

3. You can import this component in the corresponding position of the page:

<template>
  <div class="m-position">{{LocationCity}}</div>
</template>
<script>
import BMap from "BMap";
export default {
  data() {
    return {
      LocationCity: "Locating" //Define an initial value for the render layer
    };
  },
  mounted() {
    this.city(); //Trigger get city method
  },
  methods: {
    city() {      //Define how to get the city
      const geolocation = new BMap.Geolocation();
      var _this = this;
      geolocation.getCurrentPosition(
        function getinfo(position) {
          let city = position.address.city; //Access to city information
          let province = position.address.province; //Get province information
          _this.LocationCity = city;
        },
        function(e) {
          _this.LocationCity = "seek failed";
        },
        { provider: "baidu" }
      );
    }
  }
};
</script>
<style  scoped>
.m-position {
  display: inline-block;
}
</style>

Today's work requires that the user's city can be obtained and rendered to the page as soon as the project comes in:

When I started to do it, I felt like using it navigator.geoloatation() it's not finished to get the location information. Later, it was found that it's not so simple
navigator.geoloatation() I can only get longitude and latitude information, but it's not what I want

So I started a crazy search

Yes, I finally found Baidu map open platform (I thought it was the end, but I didn't think it was the beginning)

First (required) register to apply for a secret key (AK value)

1,Baidu map open platform Click to enter the download page

(login, send verification code, email verification, etc., if no response, try several times)

2. Log in and enter the personal Center for developer certification
In this step, I need to submit the ID card information. (I found that if I didn't fill in it, I also had AK value, so I didn't fill in it, which led to the error being reported all the time, and I couldn't find the reason.)

Error message:

I have finished the final explanation of registration, and the test is effective:

Baidu map API is a set of application interface based on Baidu map service provided free of charge for developers, including JavaScript API, Web Service API, Android SDK, iOS SDK, positioning SDK, Internet of vehicles API, LBS cloud and other development tools and services, providing basic map display, search, positioning, inverse / geocoding, route planning, LBS cloud storage and retrieval and other functions, suitable for PC, mobile, server and other devices, map application development under a variety of operating systems.

3. Create an app

be careful!!! Don't choose wrong projects here. Different types of projects are used in different ways

After creation, you can get AK value

2, Package components:

1. Open the indet.html File, label script:

<script type="text/javascript" src="http://api.map.baidu . COM / API? V = 2.0 & AK = AK value“></script>


Note: here, v=2.0 may report an error. Try 1.0, 2.0 and 3.0

Error message:

2. In build/ webpack.base.config Add the following code to the. JS file:

  externals: {
    "BMap": "BMap"
  },


3. You can import this component in the corresponding position of the page:

<template>
  <div class="m-position">{{LocationCity}}</div>
</template>
<script>
import BMap from "BMap";
export default {
  data() {
    return {
      LocationCity: "Locating" //Define an initial value for the render layer
    };
  },
  mounted() {
    this.city(); //Trigger get city method
  },
  methods: {
    city() {      //Define how to get the city
      const geolocation = new BMap.Geolocation();
      var _this = this;
      geolocation.getCurrentPosition(
        function getinfo(position) {
          let city = position.address.city; //Access to city information
          let province = position.address.province; //Get province information
          _this.LocationCity = city;
        },
        function(e) {
          _this.LocationCity = "seek failed";
        },
        { provider: "baidu" }
      );
    }
  }
};
</script>
<style  scoped>
.m-position {
  display: inline-block;
}
</style>

You think it's courage to bear the burden of life. In fact, it takes courage to live the life you really want. ——Sammendes

Tags: Javascript SDK Webpack Android

Posted on Fri, 26 Jun 2020 01:00:27 -0400 by bguzel