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

一、先上效果图
二、高德地图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.boundariesif (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.districtListif (subList) {let contentSub = "";let curlevel = subList[0].level;let curList = document.querySelector("#" + curlevel);if (!curList) return false;if (curlevel === "province") {curList.add(new Option("全国"));} else if (curlevel === "city") {curList.add(new Option("全市"));} else {curList.add(new Option("全区"));}for (let i = 0, l = subList.length; i < l; i++) {let name = subList[i].namelet levelSub = subList[i].levelcontentSub = new Option(name)contentSub.setAttribute('value', levelSub)contentSub.center = subList[i].centercontentSub.adcode = subList[i].adcodecurList.add(contentSub)}}},search (obj) {// 清除地图上所有覆盖物let that = thisfor (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.adcodethis.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()}

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

vue中引用高德地图根据经纬度计算两地距离
vue中引用高德地图根据经纬度计算两地距离一.示例图: npm安装 npm install vue-amap --save 在min.js文件中引入vue-amap import VueAMap f ...
在Vue中使用高德地图
在Vue中使用高德地图一.如何在Vue中引入基础高德地图 1.步骤一:注册并登录高德地图开放平台,申请密钥 2.步骤二:安装高德地图加载器 3.封装一个自定义地图组件,并初始化地图二.根据关键词搜 ...
Vue中使用高德地图
Vue中使用高德地图定位及poi搜索,以及其他插件的使用方法 1.第一步安装 npm install vue-amap --save 2.引入vue-amap main.js import Vue f ...
Vue中使用高德地图，简单明了
一.使用步骤 1.在vue中引入高德地图的加载器 npm i @amap/amap-jsapi-loader --save 在自己的组件中去引用 <template>//这个div就是 ...
Vue中使用高德地图（vue-amap）的采坑记录小白入门
这里写目录标题写在开始 step.1 安装组件 step.2 引入组件 step.3注册高德高德开发者账号,申请KEY step.4 正式使用写在开始俗话说授人以鱼不如授人以渔,直接记录代码的话 ...
vue中引入高德地图Loca数据可视化
目录引言: 关键词: 正文: 一.如何安装或者引入: 二.如何引入: 三.如何使用: 四.完整代码: 五.效果图参考: 引言: 前面我的文章介绍了vue中引入高德地图实例的,详情可以去参考,由于需 ...
Vue中集成高德地图API实现定位与自定义样式信息窗体
场景若依前后端分离版手把手教你本地搭建环境并运行项目: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/108465662 在上面 ...
Vue 中使用高德地图api
比较简单的原生方式 <template><div style="margin: 0px;padding: 0px"><div id="pan ...
vue中引入高德地图
❤️❤️❤️ Topology可视化绘图引擎 ❤️❤️❤️ 总的来说,vue组件中使用高德地图的方式有两种,一种是vue-amap :一套专门用于vue的高德地图插件:另外一种是原生的高德地图. 方式 ...

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

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

一、先上效果图

二、高德地图Vue引用

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

最新文章

热门文章