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

成品展示

前期准备

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

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

可使用服务选择web端

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

---

使用

1. 安装官方的js API 插件

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

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

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

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

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();
  },
  methods: {
    initMap() {
      // console.log(data)
      AMapLoader.load({
        key: "xxx", // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: ["AMap.DistrictSearch", "AMap.Geolocation", "AMap.Geocoder"] // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      })
        .then(AMap => {
          this.map = new AMap.Map("container", {
            //设置地图容器id
            viewMode: "2D", //是否为3D地图模式
            zoom: 3
          });
          var opts = {
            subdistrict: 0, //返回下一级行政区
            extensions: "all", //返回行政区边界坐标组等具体信息
            level: "city" //查询行政级别为 市
          };
          district = new AMap.DistrictSearch(opts); //行政区查询插件
          geoCorder = new AMap.Geocoder();
			
			//进入就显示整个国家范围
          district.search("中国", function(status, result) {
            console.log(status, result);
          });
        })
        .catch(e => {
          console.log(e);
        });
    },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57

4. 在使用页面选择省市区后，地图自动跳转到当前区域

 //父页面选择选项后，调取子页面的方法
 /**父页面  value[2]大概格式，也是高德地图的
 	{
 	text: "三水区"
 	value: "440607"
 	}
 **/
 this.$refs.maps.setDistrict(value[2]);
 ---
 //map.vue内
 
  // 设置完省市区后，地图跳转到设置好的区域来
  //polygons是绘制边界线的经纬度数组
   setDistrict(adcode) {
     for (var i = 0, l = this.polygons.length; i < l; i++) {
       this.polygons[i].setMap(null);
     }

     district.search(adcode, (status, result) => {
       if (status === "complete") {
         this.getData(result.districtList[0]);
       }
     });
   },
 	
  // 设置数据
    getData(data) {
      let _this = this;
      var bounds = data.boundaries;
      if (bounds) {
        for (var i = 0, l = bounds.length; i < l; i++) {
          var polygon = new AMap.Polygon({
            map: this.map,
            strokeWeight: 1,
            strokeColor: "#0091ea",
            fillColor: "#80d8ff",
            fillOpacity: 0.2,
            path: bounds[i]
          });
          _this.polygons.push(polygon);
        }
        this.map.setFitView(); //地图自适应
        this.map.setZoom(11);
      }
    }
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

5. 添加点击事件

//边界外的点击事件
this.map.on("click", e => {
            // console.log(e, "点击事件");
   if (marker) {
     this.map.remove(marker);
   }
   marker = new AMap.Marker({
     position: new AMap.LngLat(e.lnglat.lng, e.lnglat.lat)
   });
   this.map.add(marker);
   this.regeoCoder(e);
 });

//边界内的点击事件
 polygon.on("click", function(e) {
   // console.log(e, "点击事件");
   if (marker) {
     _this.map.remove(marker);
   }
   marker = new AMap.Marker({
     position: new AMap.LngLat(e.lnglat.lng, e.lnglat.lat)
   });
   _this.map.add(marker);
   _this.regeoCoder(e);
 });

//点击获取详细地址
 regeoCoder(e) {
  let address = {
    lng: e.lnglat.lng,
    lat: e.lnglat.lat
  };
  geoCorder.getAddress(e.lnglat, (status, result) => {
    if (status === "complete") {
      // 传递数据   result.regeocode.formattedAddress就是从省级开始的详细地址
      this.$emit("getValue", address, result.regeocode.formattedAddress);
    }
  });
},

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

最终成果如开头动图所示