vue項目：通過高德API根據地址獲取經緯度

一、在高德開發平台中注冊賬號並申請Key

具體操作參照如下：https://lbs.amap.com/api/javascript-api/guide/abc/prepare

注意：服務平台選web服務。因為高德使用手冊上寫的很清楚：手冊

瀏覽器訪問：http://restapi.amap.com/v3/geocode/geo?key=d2abc8eb849******c4e159714e239b&address=洪山區，結果如下：

{"status":"1","info":"OK","infocode":"10000","count":"1","geocodes":[{"formatted_address":"湖北省武漢市洪山區",
"country":"中國","province":"湖北省","citycode":"027","city":"武漢市","district":"洪山區","township":[],
"neighborhood":{"name":[],"type":[]},"building":{"name":[],"type":[]},"adcode":"420111","street":[],
"number":[],"location":"114.343913,30.500317","level":"區縣"}]}

二、后台調用

代碼如下：

@RunWith(SpringRunner.class)
@SpringBootTest(classes = Application.class)
public class GetLonLatTest {
    @Resource
    private AreasMapper areasMapper;

    @Test
    public void test() {
        List<Map> districts = areasMapper.selectAllDistrict();
        districts.stream().forEach(map -> {
            String city = (String) map.get("city");
            int id = Integer.parseInt(String.valueOf(map.get("id")));
            HttpURLConnection conn = null;
            String postUrl = "http://restapi.amap.com/v3/geocode/geo?key=d2abc8eb84********c4e159714e239b&address=" + city;

            String result = null;
            try {
                URL my_url = new URL(postUrl);
                //得到connection對象。
                conn = (HttpURLConnection) my_url.openConnection();
                //允許寫出
                conn.setDoOutput(true);
                //允許讀入
                conn.setDoInput(true);
                //設置請求方式
                conn.setRequestMethod("GET");
                conn.setUseCaches(false);
                conn.setConnectTimeout(10 * 60 * 1000);
                conn.setReadTimeout(10 * 60 * 1000);
                //設置請求頭
                conn.setRequestProperty("Charsert", "UTF-8");
                conn.setRequestProperty("Content-Type", "application/json; charset=UTF-8");//設置參數類型是json格式
                conn.setRequestProperty("Connection", "Keep-Alive");

                //連接網絡。請求行，請求頭的設置必須放在網絡連接前
                conn.connect();

                if (conn.getResponseCode() == 200) {
                    //通過io流得到返回的數據
                    BufferedReader br = new BufferedReader(new InputStreamReader(conn.getInputStream(), "UTF-8"));
                    StringBuilder sb = new StringBuilder();
                    String read = null;
                    while ((read = br.readLine()) != null) {
                        sb.append(read);
                        sb.append("\n");
                    }
                    br.close();
                    try {
                        JSONObject respJson = JSONObject.parseObject(sb.toString());
                        JSONArray geocodes = respJson.getJSONArray("geocodes");
                        int size = geocodes.size();
                        for (int i = 0; i < size; i++) {
                            JSONObject jsonObject = geocodes.getJSONObject(i);
                            String location = jsonObject.getString("location");
                            String[] split = location.split(",");
                            String lon = split[0];
                            String lat = split[1];
                            System.out.println("經度：" + lon);
                            System.out.println("緯度：" + lat);
                            // 根據主鍵id修改sys_areas表的經度和緯度
                            Areas areas = new Areas();
                            areas.setId(id);
                            areas.setLongitude(lon);
                            areas.setLatitude(lat);
                            areasMapper.updateByPrimaryKeySelective(areas);
                        }

                        System.out.println(respJson);
                    } catch (Exception e) {
                        e.printStackTrace();
                    }
                }
            } catch (IOException e) {
                e.printStackTrace();
            }
        });
    }
}

三、vue中使用

1、引入jQuery

1）、安裝jquery

cnpm i jquery -s

2)、main.js中引入

import $ from 'jquery'
window.jQuery = $;
window.$ = $;

3)、調用高德API

<template>
  <div>
    <div>
      【經緯度】{{location}}
    </div>
  </div>
</template>

<script>
export default {
  name: 'Home',
  created() {
    this.getLocation()
  },
  data(){
    return{
      location: null
    }
  },
  methods: {// 根據地址獲取經緯度
    getLocation () {
      let that = this
      let data = {
        key: 'd2abc8eb8*******e159714e239b',
        address: '洪山區'
      }
      $.ajax({
        url: 'http://restapi.amap.com/v3/geocode/geo',
        type: 'get',
        dataType: 'jsonp',
        data,
        success: function (data) {
          console.log(data.geocodes[0].location)//獲取到的經緯度
          that.location = data.geocodes[0].location
        }
      })
    }
  }
}
</script>

效果如下：

注意：調用高德API需要在外網環境，如果是內網，則無法使用。