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

一、准备素材

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

二、实现


<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

你可能感兴趣的:(javaScript)