Prerequisites:

First, map the local domain name to the extranet, which can be done using Ngrok or Natapp.

Ngrok

Tutorial: www.ngrok.cc/_book/start…

The tunnel information is as follows

The local domain name is mapped to the Internet

Natapp

Refer to the article: blog.csdn.net/w405722907/…

The tunnel information is as follows

The local domain name is mapped to the Internet

Search baidu API address:

lbsyun.baidu.com/index.php

Related Address:Lbsyun.baidu.com/index.php?t…

External API access address

Request resources address – http://api.map.baidu.com/place/v2/search?query=ATM machine & tag = bank & region & output = = Beijing json&ak = you ak / / GET request

Obtaining the service Key (AK)

The AK configuration is as follows:

The front end plugs into the Autocomplete component of the Element-UI

Element. The eleme. Cn / # / useful – cn/com… The component diagram is as follows:

The front-end code

Import {Message,Autocomplete} from 'element-ui' 2.vue.use (Autocomplete); Exports = {devServer:{disableHostCheck: Host :'localhost', port:8081, proxy:{'/ API ':{// target:'http://localhost:8081', // target:'http://yangguo.natapp1.cc', target:'http://localhost:8888', changeOrigin:true, pathRewrite:{ '/api':'' } }, 'baiduMapApi':{target:'http://api.map.baidu.com', changeOrigin:true, // allow cross-domain pathRewrite:{'/baiduMapApi':'}}}}}Copy the code

Components access

<div class="item"> <! -- 1. Introduce the components support -- -- > < el autocomplete class = "inline - input" v - model = "checkedItem. DetailAddress" :fetch-suggestions="querySearch" placeholder=" placeholder ":trigger-on-focus="false" @select="handleSelect" ></el-autocomplete> </div>Copy the code

Code logic

data() {
    return {
      checkedItem: {
        province: "",
        city: "",
        region: "",
      }
    };
  }
Copy the code
querySearch(queryString, Cb) {/ / access area let region = this. CheckedItem, province + enclosing checkedItem. City + enclosing checkedItem. The region; Let url = "/place/v2/search? Query =" + queryString + "&region=" + region + "&output=json&ak= ak"; This.axios.get (url, {baseURL: "baiduMapApi", // set proxy prefix}).then((res) => {// get the returned data let list = res.results; // Let results = []; list.map((item) => { results.push({ value: item.name, address: item.address, "province":item.province, "city":item.city, "area":item.area, }); }); // Call callback to return the suggestion list. Cb (results); }); }, handleSelect(item){ this.checkedItem.province=item.province this.checkedItem.city=item.city this.checkedItem.region=item.area },Copy the code