【vue.js】使用高德地图选择省市区后，再点击确认当前选择的位置

成品展示

前期准备

先去高德开放平台申请一个web端的key。

2022年后申请的key，必须和它生成的secret一起使用。

可使用服务选择web端

在vue项目中，可以通过直接引入js文件，也可以安装vue-amap等插件使用。

---

使用

1. 安装官方的js API 插件

	npm i @amap/amap-jsapi-loader --save

2. 在index.html文件内，把安全秘钥（点击查看官方文档）给引用进去

<script>
  window._AMapSecurityConfig = {
     
    // 例如 ：serviceHost:'http://1.1.1.1:80/_AMapService',  //安全写法，前面是服务器地址
    // securityJsCode: "xxxkey"  //测试时候的写法
  };
</script>

配置好基础的信息后，就可以开始使用了

3. 使用，新建map.vue，设置成组件使用

<template>
  <div id="container"></div>
</template>
<script type="text/javascript">
</script>

<script>
import AMapLoader from "@amap/amap-jsapi-loader"; //医用文件
let district;
let geoCorder;
let marker;
export default {
   
  props: {
   
    data: {
   
      type: Object
    }
  },
  data() {
   
    return {
   
      map: null,
      polygons: []
    };
  },
  mounted() {
   
    this.initMap();
  },