在vue中使用高德地图的下属省市区查询，实现省市区的联动以及规划范围

一、先上效果图

二、高德地图Vue引用

1. webpack引入高德

在webpack.base.conf.js中找到module.exports对象。添加externals: { 'AMap': 'AMap' }代码。

2. index.html引入高德js

在index.html页面加入<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.4&key='你的key值&plugin=AMap.DistrictSearch'"></script>

3. 在页面中引入高德js

在vue文件中import进来。import AMap from 'AMap'; //在页面中引入高德地图

4.地图初始化生成代码：

 loadmap () {
      this.map = new AMap.Map('container', {
        center: [117.258134, 38.98059],
        zoom: 13
      })
    }

5.结构部分代码：

 <div style="text-align: right;">
      省：<select id="province" style="width: 130px; height: 30px; border: 1px solid #ccc" @change="search"></select>
      市：<select id="city" style="width: 130px; height: 30px; border: 1px solid #ccc" @change="search"></select>
      区：<select id="district" style="width: 130px; height: 30px; border: 1px solid #ccc" @change="search"></select>
      </div>
    </el-row>
    <div id='container' class='mymap'></div>

6.data中的数据：

data () {
    return {
      map: null,
      polygons: [],
      district: null
    }
  }

7.methods绘制地图代码：

   province() {
      // 行政区划查询
      let opts = {
        subdistrict: 1, // 返回下一级行政区
        showbiz: false // 最后一级返回街道信息
      }
      this.district = new AMap.DistrictSearch(opts) // 注意：需要使用插件同步下发功能才能这样直接使用
      this.district.search('中国', (status, result) => {
        if (status === 'complete') {
          this.getData(result.districtList[0])
        }
      })
    },
    getData (data, level) {
      let citySelect = document.getElementById('city')
      let districtSelect = document.getElementById('district')
      let bounds = data.boundaries
      if (bounds) {
        for (let i = 0, l = bounds.length; i < l; i++) {
          let 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() // 地图自适应
      }
      // 清空下一级别的下拉列表
      if (level === 'province') {
        citySelect.innerHTML = ''
        districtSelect.innerHTML = ''
      } else if (level === 'city') {
        districtSelect.innerHTML = ''
      }
      let subList = data.districtList
      if (subList) {
        let contentSub = new Option('--请选择--')
        let curlevel = subList[0].level
        let curList = document.querySelector('#' + curlevel)
        curList.add(contentSub)
        for (let i = 0, l = subList.length; i < l; i++) {
          let name = subList[i].name
          let levelSub = subList[i].level
          contentSub = new Option(name)
          contentSub.setAttribute('value', levelSub)
          contentSub.center = subList[i].center
          contentSub.adcode = subList[i].adcode
          curList.add(contentSub)
        }
      }
    },
    search (obj) {
      // 清除地图上所有覆盖物
      let that = this
      for (let i = 0, l = this.polygons.length; i < l; i++) {
        this.polygons[i].setMap(null)
      }
      let option = obj.srcElement[obj.srcElement.options.selectedIndex]
      let adcode = option.adcode
      this.district.setLevel(option.value) // 行政区级别
      this.district.setExtensions('all')
      // 行政区查询
      // 按照adcode进行查询可以保证数据返回的唯一性
      this.district.search(adcode, function (status, result) {
        if (status === 'complete') {
          that.getData(result.districtList[0], obj.srcElement.id)
        }
      })
    }

8、最后加载一下：
根据自己需求加载出来

mounted () {
    this.loadmap()
    this.province()
  }

---

版权声明：本文为博主原创文章，转载请附上博文链接！