【javaScript随笔】05 高德地图简单实现省市区三级联动

最新推荐文章于 2024-04-28 10:45:38 发布

三和小钢炮

最新推荐文章于 2024-04-28 10:45:38 发布

阅读量2.1k

点赞数

分类专栏： javaScript

本文链接：https://blog.csdn.net/fwx426328/article/details/81611143

版权

javaScript 专栏收录该内容

30 篇文章 0 订阅

订阅专栏

一、准备素材

高德地图key值
vue.js (非必要）

二、实现

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.8&key=key"></script>
</head>
<body>
    <div id="app">
        <select @change="provinceChange">
            <option v-for="province in provinceList">{{province}}</option>
        </select>
        <select @change="cityChange">
            <option v-for="city in cityList">{{city}}</option>
        </select>
        <select @change="districtChange">
            <option v-for="district in districtList">{{district}}</option>
        </select>
        <select>
            <option v-for="street in streetList">{{street}}</option>
        </select>
    </div>
</body>
<script type="text/javascript">
    new Vue({
        el: "#app",
        data: {
            districtSearch: '',
            provinceList: [],
            cityList: [],
            districtList: [],
            streetList: []
        },
        mounted: function () {
            this.init();
        },
        methods: {
            init: function () {
                var _this = this;
                AMap.plugin('AMap.DistrictSearch', function () {
                    _this.districtSearch = new AMap.DistrictSearch({
                        level: 'country',
                        subdistrict: 1
                    })
                });
                this.districtSearch.search('中国', function (status, result) {
                    var list = result.districtList[0]['districtList'];
                    for (var i = 0; i < list.length; i++) {
                        _this.provinceList.push(list[i].name);
                    }
                })
            },
            provinceChange: function (e) {
                var _this = this;
                var provinceName = e.target.value;
                this.cityList = [];
                this.districtSearch.search(provinceName, function (status, result) {
                    var list = result.districtList[0]['districtList'];
                    for (var i = 0; i < list.length; i++) {
                        _this.cityList.push(list[i].name);
                    }
                })
            },
            cityChange: function (e) {
                var _this = this;
                var cityName = e.target.value;
                this.districtList = [];
                this.districtSearch.search(cityName, function (status, result) {
                    var list = result.districtList[0]['districtList'];
                    for (var i = 0; i < list.length; i++) {
                        _this.districtList.push(list[i].name);
                    }
                })
            },
            districtChange: function(e) {
                var _this = this;
                var districtName = e.target.value;
                this.streetList = [];
                this.districtSearch.search(districtName, function (status, result) {
                    var list = result.districtList[0]['districtList'];
                    for (var i = 0; i < list.length; i++) {
                        _this.streetList.push(list[i].name);
                        console.log(list[i]);
                    }
                })
            }
        }
    })
</script>

</html>

三、页面效果

这里写图片描述

四、gitHub地址

https://github.com/fwx426328/AMap.git

三和小钢炮

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
【javaScript随笔】05 高德地图简单实现省市区三级联动

一、准备素材高德地图key值 vue.js (非必要）二、实现&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;script src="https://cdn.
复制链接

扫一扫