地图城市选择器组件,可在vue页面引用

地图城市选择器组件,可在vue页面引用_第1张图片
组件代码

<template>
  <Row id="app">
    <Dropdown trigger="click" placement="bottom-start">
      <Input type="text" v-model="airportName" placeholder="地区" readonly/>
      <DropdownMenu slot="list">
        <Row style="position: relative;">
          <Row style="position: absolute; width: 533px; box-shadow: 0 0 4px 0 rgba(117,117,117,0.5); border-radius: 2px; padding: 20px 21px; background-color: #f8f8f9;">
            <DropdownItem >
              <Row style="height: 25px;">
                <ButtonGroup size="small" v-for="(item, index) in buttonList" :key="index">
                  <Button style="margin-right: 5px;" @click="selectDepCity(item)">{{item.cityName}}</Button>
                </ButtonGroup>
              </Row>
            </DropdownItem>
            <Row style="height: 70px; margin-top: 35px;">
              <Anchor container=".city-content" style="float: left; width: auto; background-color: white;" v-for="(item, index) in cityList" :key="index">
                <AnchorLink style="border: 1px solid #dcdee2; padding-right: 15px;" :href="'#'+item.id" :title="item.label" ></AnchorLink>
              </Anchor>
            </Row>
            <DropdownItem style="overflow-x: hidden; margin-left: -5px; width: 105%;">
              <Row class="city-content" style="width: 108%; max-height: 500px; overflow-y: auto; overflow-x: hidden; padding: 10px 13px 0 13px;">
                <ul v-for="(item,index) in data" :key="index" class="clearfix">
                  <label style="font-weight: bold;" :id="item.airportCode">{{item.cityName}}</label>
                  <li v-for="(ritem,index) in item.cities" :key="index" @click="selectDepCity(ritem)">{{ritem.cityName}}</li>
                </ul>
              </Row>
            </DropdownItem>
          </Row>
        </Row>
      </DropdownMenu>
    </Dropdown>
  </Row>
</template>
<script>
export default {
  name: 'comb-city',
  data () {
    return {
      buttonList: [
        {
          cityName: '北京',
          center: '116.40,39.90'
        },
        {
          cityName: '上海',
          center: '121.47,31.23'
        },
        {
          cityName: '深圳',
          center: '114.025974,22.546054'
        },
        {
          cityName: '成都',
          center: '104.067923,30.679943'
        },
        {
          cityName: '天津',
          center: '117.20,39.12'
        },
        {
          cityName: '杭州',
          center: '120.219375,30.259244'
        },
        {
          cityName: '武汉',
          center: '114.3162,30.581084'
        },
        {
          cityName: '重庆',
          center: '106.55,29.57'
        }
      ],
      data: [{
        airportCode: 'A',
        cityName: '安徽',
        center: '117.216005,31.859252',
        cities: [{
          cityName: '合肥',
          center: '117.282699,31.866942'
        }, {
          cityName: '安庆',
          center: '117.058739,30.537898'
        }, {
          cityName: '蚌埠',
          center: '117.35708,32.929499'
        }, {
          cityName: '亳州',
          center: '115.787928,33.871211'
        }, {
          cityName: '巢湖',
          center: '117.88049,31.608733'
        }, {
          cityName: '池州',
          center: '117.494477,30.660019'
        }, {
          cityName: '滁州',
          center: '118.32457,32.317351'
        }, {
          cityName: '阜阳',
          center: '115.820932,32.901211'
        }, {
          cityName: '淮北',
          center: '116.791447,33.960023'
        }, {
          cityName: '淮南',
          center: '117.018639,32.642812'
        }, {
          cityName: '黄山',
          center: '118.29357,29.734435'
        }, {
          cityName: '六安',
          center: '116.505253,31.755558'
        }, {
          cityName: '马鞍山',
          center: '118.515882,31.688528'
        }, {
          cityName: '宿州',
          center: '116.988692,33.636772'
        }, {
          cityName: '铜陵',
          center: '117.819429,30.94093'
        }, {
          cityName: '芜湖',
          center: '118.384108,31.36602'
        }, {
          cityName: '宣城',
          center: '118.752096,30.951642'
        }]
      }, {
        airportCode: 'F',
        cityName: '福建',
        center: '117.984943,26.050118',
        cities: [{
          cityName: '福州',
          center: '119.330221,26.047125'
        }, {
          cityName: '龙岩',
          center: '117.017997,25.078685'
        }, {
          cityName: '南平',
          center: '118.181883,26.643626'
        }, {
          cityName: '宁德',
          center: '119.542082,26.656527'
        }, {
          cityName: '莆田',
          center: '119.077731,25.44845'
        }, {
          cityName: '泉州',
          center: '118.600362,24.901652'
        }, {
          cityName: '三明',
          center: '117.642194,26.270835'
        }, {
          cityName: '厦门',
          center: '118.103886,24.489231'
        }, {
          cityName: '漳州',
          center: '117.676205,24.517065'
        }]
      }, {
        airportCode: 'G',
        cityName: '甘肃',
        center: '102.457625,38.103267|6',
        cities: [{
          cityName: '兰州',
          center: '103.823305,36.064226'
        }, {
          cityName: '白银',
          center: '104.171241,36.546682'
        }, {
          cityName: '定西',
          center: '104.626638,35.586056'
        }, {
          cityName: '甘南州',
          center: '102.917442,34.992211'
        }, {
          cityName: '嘉峪关',
          center: '98.281635,39.802397'
        }, {
          cityName: '金昌',
          center: '102.208126,38.516072'
        }, {
          cityName: '酒泉',
          center: '98.508415,39.741474'
        }, {
          cityName: '临夏州',
          center: '103.215249,35.598514'
        }, {
          cityName: '陇南',
          center: '104.934573,33.39448'
        }, {
          cityName: '平凉',
          center: '106.688911,35.55011'
        }, {
          cityName: '庆阳',
          center: '107.644227,35.726801'
        }, {
          cityName: '天水',
          center: '105.736932,34.584319'
        }, {
          cityName: '武威',
          center: '102.640147,37.933172'
        }, {
          cityName: '张掖',
          center: '100.459892,38.93932'
        }]
      }, {
        airportCode: 'G',
        cityName: '广东',
        center: '113.394818,23.408004',
        cities: [{
          cityName: '广州',
          center: '113.30765,23.120049'
        }, {
          cityName: '潮州',
          center: '116.630076,23.661812'
        }, {
          cityName: '东莞',
          center: '113.763434,23.043024'
        }, {
          cityName: '佛山',
          center: '113.134026,23.035095'
        }, {
          cityName: '河源',
          center: '114.713721,23.757251'
        }, {
          cityName: '惠州',
          center: '114.410658,23.11354'
        }, {
          cityName: '江门',
          center: '113.078125,22.575117'
        }, {
          cityName: '揭阳',
          center: '116.379501,23.547999'
        }, {
          cityName: '茂名',
          center: '110.931245,21.668226'
        }, {
          cityName: '梅州',
          center: '116.126403,24.304571'
        }, {
          cityName: '清远',
          center: '113.040773,23.698469'
        }, {
          cityName: '汕头',
          center: '116.72865,23.383908'
        }, {
          cityName: '汕尾',
          center: '115.372924,22.778731'
        }, {
          cityName: '韶关',
          center: '113.594461,24.80296'
        }, {
          cityName: '深圳',
          center: '114.025974,22.546054'
        }, {
          cityName: '阳江',
          center: '111.97701,21.871517'
        }, {
          cityName: '云浮',
          center: '112.050946,22.937976'
        }, {
          cityName: '湛江',
          center: '110.365067,21.257463'
        }, {
          cityName: '肇庆',
          center: '112.479653,23.078663'
        }, {
          cityName: '中山',
          center: '113.42206,22.545178'
        }, {
          cityName: '珠海',
          center: '113.562447,22.256915'
        }]
      }, {
        airportCode: 'G',
        cityName: '广西',
        center: '108.924274,23.552255',
        cities: [{
          cityName: '南宁',
          center: '108.297234,22.806493'
        }, {
          cityName: '百色',
          center: '106.631821,23.901512'
        }, {
          cityName: '北海',
          center: '109.122628,21.472718'
        }, {
          cityName: '崇左',
          center: '107.357322,22.415455'
        }, {
          cityName: '防城港',
          center: '108.351791,21.617398'
        }, {
          cityName: '桂林',
          center: '110.26092,25.262901'
        }, {
          cityName: '贵港',
          center: '109.613708,23.103373'
        }, {
          cityName: '河池',
          center: '108.069948,24.699521'
        }, {
          cityName: '贺州',
          center: '111.552594,24.411054'
        }, {
          cityName: '来宾',
          center: '109.231817,23.741166'
        }, {
          cityName: '柳州',
          center: '109.422402,24.329053'
        }, {
          cityName: '钦州',
          center: '108.638798,21.97335'
        }, {
          cityName: '梧州',
          center: '111.305472,23.485395'
        }, {
          cityName: '玉林',
          center: '110.151676,22.643974'
        }]
      }, {
        airportCode: 'G',
        cityName: '贵州',
        center: '106.734996,26.902826',
        cities: [{
          cityName: '贵阳',
          center: '106.709177,26.629907'
        }, {
          cityName: '安顺',
          center: '105.92827,26.228595'
        }, {
          cityName: '毕节地区',
          center: '105.300492,27.302612'
        }, {
          cityName: '六盘水',
          center: '104.852087,26.591866'
        }, {
          cityName: '铜仁地区',
          center: '109.196161,27.726271'
        }, {
          cityName: '遵义',
          center: '106.93126,27.699961'
        }, {
          cityName: '黔西南州',
          center: '104.900558,25.095148'
        }, {
          cityName: '黔东南州',
          center: '107.985353,26.583992'
        }, {
          cityName: '黔南州',
          center: '107.523205,26.264536'
        }]
      }, {
        airportCode: 'H',
        cityName: '海南',
        center: '109.733755,19.180501|9',
        cities: [{
          cityName: '海口',
          center: '110.330802,20.022071'
        }, {
          cityName: '白沙',
          center: '109.358586,19.216056'
        }, {
          cityName: '保亭',
          center: '109.656113,18.597592'
        }, {
          cityName: '昌江',
          center: '109.0113,19.222483'
        }, {
          cityName: '儋州',
          center: '109.413973,19.571153'
        }, {
          cityName: '澄迈',
          center: '109.996736,19.693135'
        }, {
          cityName: '东方',
          center: '108.85101,18.998161'
        }, {
          cityName: '定安',
          center: '110.32009,19.490991'
        }, {
          cityName: '琼海',
          center: '110.414359,19.21483'
        }, {
          cityName: '琼中',
          center: '109.861849,19.039771'
        }, {
          cityName: '乐东',
          center: '109.062698,18.658614'
        }, {
          cityName: '临高',
          center: '109.724101,19.805922'
        }, {
          cityName: '陵水',
          center: '109.948661,18.575985'
        }, {
          cityName: '三亚',
          center: '109.522771,18.257776'
        }, {
          cityName: '屯昌',
          center: '110.063364,19.347749'
        }, {
          cityName: '万宁',
          center: '110.292505,18.839886'
        }, {
          cityName: '文昌',
          center: '110.780909,19.750947'
        }, {
          cityName: '五指山',
          center: '109.51775,18.831306'
        }]
      }, {
        airportCode: 'H',
        cityName: '河北',
        center: '115.661434,38.61384',
        cities: [{
          cityName: '石家庄',
          center: '114.522082,38.048958'
        }, {
          cityName: '保定',
          center: '115.49481,38.886565'
        }, {
          cityName: '沧州',
          center: '116.863806,38.297615'
        }, {
          cityName: '承德',
          center: '117.933822,40.992521'
        }, {
          cityName: '邯郸',
          center: '114.482694,36.609308'
        }, {
          cityName: '衡水',
          center: '115.686229,37.746929'
        }, {
          cityName: '廊坊',
          center: '116.703602,39.518611'
        }, {
          cityName: '秦皇岛',
          center: '119.604368,39.945462'
        }, {
          cityName: '唐山',
          center: '118.183451,39.650531'
        }, {
          cityName: '邢台',
          center: '114.520487,37.069531'
        }, {
          cityName: '张家口',
          center: '114.893782,40.811188'
        }]
      }, {
        airportCode: 'H',
        cityName: '河南',
        center: '113.486804,34.157184',
        cities: [{
          cityName: '郑州',
          center: '113.649644,34.75661'
        }, {
          cityName: '安阳',
          center: '114.351807,36.110267'
        }, {
          cityName: '鹤壁',
          center: '114.29777,35.755426'
        }, {
          cityName: '焦作',
          center: '113.211836,35.234608'
        }, {
          cityName: '开封',
          center: '114.351642,34.801854'
        }, {
          cityName: '洛阳',
          center: '112.447525,34.657368'
        }, {
          cityName: '漯河',
          center: '114.046061,33.576279'
        }, {
          cityName: '南阳',
          center: '112.542842,33.01142'
        }, {
          cityName: '平顶山',
          center: '113.300849,33.745301'
        }, {
          cityName: '濮阳',
          center: '115.026627,35.753298'
        }, {
          cityName: '三门峡',
          center: '111.181262,34.78332'
        }, {
          cityName: '商丘',
          center: '115.641886,34.438589'
        }, {
          cityName: '新乡',
          center: '113.91269,35.307258'
        }, {
          cityName: '信阳',
          center: '114.085491,32.128582'
        }, {
          cityName: '许昌',
          center: '113.835312,34.02674'
        }, {
          cityName: '周口',
          center: '114.654102,33.623741'
        }, {
          cityName: '驻马店',
          center: '114.049154,32.983158'
        }]
      }, {
        airportCode: 'H',
        cityName: '黑龙江',
        center: '128.047414,47.356592|6',
        cities: [{
          cityName: '哈尔滨',
          center: '126.657717,45.773225'
        }, {
          cityName: '大庆',
          center: '125.02184,46.596709'
        }, {
          cityName: '大兴安岭地区',
          center: '124.196104,51.991789|10'
        }, {
          cityName: '鹤岗',
          center: '130.292472,47.338666'
        }, {
          cityName: '黑河',
          center: '127.50083,50.25069'
        }, {
          cityName: '鸡西',
          center: '130.941767,45.32154'
        }, {
          cityName: '佳木斯',
          center: '130.284735,46.81378'
        }, {
          cityName: '牡丹江',
          center: '129.608035,44.588521'
        }, {
          cityName: '七台河',
          center: '131.019048,45.775005'
        }, {
          cityName: '齐齐哈尔',
          center: '123.987289,47.3477'
        }, {
          cityName: '双鸭山',
          center: '131.171402,46.655102'
        }, {
          cityName: '绥化',
          center: '126.989095,46.646064'
        }, {
          cityName: '伊春',
          center: '128.910766,47.734685'
        }]
      }, {
        airportCode: 'H',
        cityName: '湖北',
        center: '112.410562,31.209316',
        cities: [{
          cityName: '武汉',
          center: '114.3162,30.581084'
        }, {
          cityName: '鄂州',
          center: '114.895594,30.384439'
        }, {
          cityName: '恩施',
          center: '109.517433,30.308978'
        }, {
          cityName: '黄冈',
          center: '114.906618,30.446109'
        }, {
          cityName: '黄石',
          center: '115.050683,30.216127'
        }, {
          cityName: '荆门',
          center: '112.21733,31.042611'
        }, {
          cityName: '荆州',
          center: '112.241866,30.332591'
        }, {
          cityName: '潜江',
          center: '112.768768,30.343116'
        }, {
          cityName: '神农架林区',
          center: '110.487231,31.595768'
        }, {
          cityName: '十堰',
          center: '110.801229,32.636994'
        }, {
          cityName: '随州',
          center: '113.379358,31.717858'
        }, {
          cityName: '天门',
          center: '113.12623,30.649047'
        }, {
          cityName: '仙桃',
          center: '113.387448,30.293966'
        }, {
          cityName: '咸宁',
          center: '114.300061,29.880657'
        }, {
          cityName: '襄樊',
          center: '112.176326,32.094934'
        }, {
          cityName: '孝感',
          center: '113.935734,30.927955'
        }, {
          cityName: '宜昌',
          center: '111.310981,30.732758'
        }]
      }, {
        airportCode: 'H',
        cityName: '湖南',
        center: '111.720664,27.695864',
        cities: [{
          cityName: '长沙',
          center: '112.979353,28.213478'
        }, {
          cityName: '常德',
          center: '111.653718,29.012149'
        }, {
          cityName: '郴州',
          center: '113.037704,25.782264'
        }, {
          cityName: '衡阳',
          center: '112.583819,26.898164'
        }, {
          cityName: '怀化',
          center: '109.986959,27.557483'
        }, {
          cityName: '娄底',
          center: '111.996396,27.741073'
        }, {
          cityName: '邵阳',
          center: '111.461525,27.236811'
        }, {
          cityName: '湘潭',
          center: '112.935556,27.835095'
        }, {
          cityName: '湘西州',
          center: '109.745746,28.317951'
        }, {
          cityName: '益阳',
          center: '112.366547,28.588088'
        }, {
          cityName: '永州',
          center: '111.614648,26.435972'
        }, {
          cityName: '岳阳',
          center: '113.146196,29.378007'
        }, {
          cityName: '张家界',
          center: '110.48162,29.124889'
        }, {
          cityName: '株洲',
          center: '113.131695,27.827433'
        }]
      }, {
        airportCode: 'J',
        cityName: '江苏',
        center: '119.368489,33.013797',
        cities: [{
          cityName: '南京',
          center: '118.778074,32.057236'
        }, {
          cityName: '常州',
          center: '119.981861,31.771397'
        }, {
          cityName: '淮安',
          center: '119.030186,33.606513'
        }, {
          cityName: '连云港',
          center: '119.173872,34.601549'
        }, {
          cityName: '南通',
          center: '120.873801,32.014665'
        }, {
          cityName: '苏州',
          center: '120.619907,31.317987'
        }, {
          cityName: '宿迁',
          center: '118.296893,33.95205'
        }, {
          cityName: '泰州',
          center: '119.919606,32.476053'
        }, {
          cityName: '无锡',
          center: '120.305456,31.570037'
        }, {
          cityName: '徐州',
          center: '117.188107,34.271553'
        }, {
          cityName: '盐城',
          center: '120.148872,33.379862'
        }, {
          cityName: '扬州',
          center: '119.427778,32.408505'
        }, {
          cityName: '镇江',
          center: '119.455835,32.204409'
        }]
      }, {
        airportCode: 'J',
        cityName: '江西',
        center: '115.676082,27.757258',
        cities: [{
          cityName: '南昌',
          center: '115.893528,28.689578'
        }, {
          cityName: '抚州',
          center: '116.360919,27.954545'
        }, {
          cityName: '赣州',
          center: '114.935909,25.845296'
        }, {
          cityName: '吉安',
          center: '114.992039,27.113848'
        }, {
          cityName: '景德镇',
          center: '117.186523,29.303563'
        }, {
          cityName: '九江',
          center: '115.999848,29.71964'
        }, {
          cityName: '萍乡',
          center: '113.859917,27.639544'
        }, {
          cityName: '上饶',
          center: '117.955464,28.457623'
        }, {
          cityName: '新余',
          center: '114.947117,27.822322'
        }, {
          cityName: '宜春',
          center: '114.400039,27.81113'
        }, {
          cityName: '鹰潭',
          center: '117.03545,28.24131'
        }]
      }, {
        airportCode: 'J',
        cityName: '吉林',
        center: '126.262876,43.678846',
        cities: [{
          cityName: '长春',
          center: '125.313642,43.898338'
        }, {
          cityName: '白城',
          center: '122.840777,45.621086'
        }, {
          cityName: '白山',
          center: '126.435798,41.945859'
        }, {
          cityName: '吉林市',
          center: '126.564544,43.871988'
        }, {
          cityName: '辽源',
          center: '125.133686,42.923303'
        }, {
          cityName: '四平',
          center: '124.391382,43.175525'
        }, {
          cityName: '松原',
          center: '124.832995,45.136049'
        }, {
          cityName: '通化',
          center: '125.94265,41.736397'
        }, {
          cityName: '延边',
          center: '129.485902,42.896414'
        }]
      }, {
        airportCode: 'L',
        cityName: '辽宁',
        center: '122.753592,41.6216',
        cities: [{
          cityName: '沈阳',
          center: '123.432791,41.808645'
        }, {
          cityName: '鞍山',
          center: '123.007763,41.118744'
        }, {
          cityName: '本溪',
          center: '123.778062,41.325838'
        }, {
          cityName: '朝阳',
          center: '120.446163,41.571828'
        }, {
          cityName: '大连',
          center: '121.593478,38.94871'
        }, {
          cityName: '丹东',
          center: '124.338543,40.129023'
        }, {
          cityName: '抚顺',
          center: '123.92982,41.877304'
        }, {
          cityName: '阜新',
          center: '121.660822,42.01925'
        }, {
          cityName: '葫芦岛',
          center: '120.860758,40.74303'
        }, {
          cityName: '锦州',
          center: '121.147749,41.130879'
        }, {
          cityName: '辽阳',
          center: '123.172451,41.273339'
        }, {
          cityName: '盘锦',
          center: '122.073228,41.141248'
        }, {
          cityName: '铁岭',
          center: '123.85485,42.299757'
        }, {
          cityName: '营口',
          center: '122.233391,40.668651'
        }]
      }, {
        airportCode: 'N',
        cityName: '内蒙古',
        center: '114.415868,43.468238|5',
        cities: [{
          cityName: '呼和浩特',
          center: '111.660351,40.828319'
        }, {
          cityName: '阿拉善盟',
          center: '105.695683,38.843075'
        }, {
          cityName: '包头',
          center: '109.846239,40.647119'
        }, {
          cityName: '巴彦淖尔',
          center: '107.423807,40.76918'
        }, {
          cityName: '赤峰',
          center: '118.930761,42.297112'
        }, {
          cityName: '鄂尔多斯',
          center: '109.993706,39.81649'
        }, {
          cityName: '呼伦贝尔',
          center: '119.760822,49.201636'
        }, {
          cityName: '通辽',
          center: '122.260363,43.633756'
        }, {
          cityName: '乌海',
          center: '106.831999,39.683177'
        }, {
          cityName: '乌兰察布',
          center: '113.112846,41.022363'
        }, {
          cityName: '锡林郭勒盟',
          center: '116.02734,43.939705'
        }, {
          cityName: '兴安盟',
          center: '122.048167,46.083757'
        }]
      }, {
        airportCode: 'N',
        cityName: '宁夏',
        center: '106.155481,37.321323',
        cities: [{
          cityName: '银川',
          center: '106.206479,38.502621'
        }, {
          cityName: '固原',
          center: '106.285268,36.021523'
        }, {
          cityName: '石嘴山',
          center: '106.379337,39.020223'
        }, {
          cityName: '吴忠',
          center: '106.208254,37.993561'
        }, {
          cityName: '中卫',
          center: '105.196754,37.521124'
        }]
      }, {
        airportCode: 'Q',
        cityName: '青海',
        center: '96.202544,35.499761',
        cities: [{
          cityName: '西宁',
          center: '101.767921,36.640739'
        }, {
          cityName: '果洛州',
          center: '100.223723,34.480485'
        }, {
          cityName: '海东地区',
          center: '102.085207,36.51761'
        }, {
          cityName: '海北州',
          center: '100.879802,36.960654'
        }, {
          cityName: '海南州',
          center: '100.624066,36.284364'
        }, {
          cityName: '海西州',
          center: '97.342625,37.373799'
        }, {
          cityName: '黄南州',
          center: '102.0076,35.522852'
        }, {
          cityName: '玉树州',
          center: '97.013316,33.00624'
        }]
      }, {
        airportCode: 'S',
        cityName: '山东',
        center: '118.527663,36.09929',
        cities: [{
          cityName: '济南',
          center: '117.024967,36.682785'
        }, {
          cityName: '滨州',
          center: '117.968292,37.405314'
        }, {
          cityName: '东营',
          center: '118.583926,37.487121'
        }, {
          cityName: '德州',
          center: '116.328161,37.460826'
        }, {
          cityName: '菏泽',
          center: '115.46336,35.26244'
        }, {
          cityName: '济宁',
          center: '116.600798,35.402122'
        }, {
          cityName: '莱芜',
          center: '117.684667,36.233654'
        }, {
          cityName: '聊城',
          center: '115.986869,36.455829'
        }, {
          cityName: '临沂',
          center: '118.340768,35.072409'
        }, {
          cityName: '青岛',
          center: '120.384428,36.105215'
        }, {
          cityName: '日照',
          center: '119.50718,35.420225'
        }, {
          cityName: '泰安',
          center: '117.089415,36.188078'
        }, {
          cityName: '威海',
          center: '122.093958,37.528787'
        }, {
          cityName: '潍坊',
          center: '119.142634,36.716115'
        }, {
          cityName: '烟台',
          center: '121.309555,37.536562'
        }, {
          cityName: '枣庄',
          center: '117.279305,34.807883'
        }, {
          cityName: '淄博',
          center: '118.059134,36.804685'
        }]
      }, {
        airportCode: 'S',
        cityName: '山西',
        center: '112.515496,37.866566',
        cities: [{
          cityName: '太原',
          center: '112.550864,37.890277'
        }, {
          cityName: '长治',
          center: '113.120292,36.201664'
        }, {
          cityName: '大同',
          center: '113.290509,40.113744'
        }, {
          cityName: '晋城',
          center: '112.867333,35.499834'
        }, {
          cityName: '晋中',
          center: '112.738514,37.693362'
        }, {
          cityName: '临汾',
          center: '111.538788,36.099745'
        }, {
          cityName: '吕梁',
          center: '111.143157,37.527316'
        }, {
          cityName: '朔州',
          center: '112.479928,39.337672'
        }, {
          cityName: '忻州',
          center: '112.727939,38.461031'
        }, {
          cityName: '阳泉',
          center: '113.569238,37.869529'
        }, {
          cityName: '运城',
          center: '111.006854,35.038859'
        }]
      }, {
        airportCode: 'S',
        cityName: '陕西',
        center: '109.503789,35.860026',
        cities: [{
          cityName: '西安',
          center: '108.953098,34.2778'
        }, {
          cityName: '安康',
          center: '109.038045,32.70437'
        }, {
          cityName: '宝鸡',
          center: '107.170645,34.364081'
        }, {
          cityName: '汉中',
          center: '107.045478,33.081569'
        }, {
          cityName: '商洛',
          center: '109.934208,33.873907'
        }, {
          cityName: '铜川',
          center: '108.968067,34.908368'
        }, {
          cityName: '渭南',
          center: '109.483933,34.502358'
        }, {
          cityName: '咸阳',
          center: '108.707509,34.345373'
        }, {
          cityName: '延安',
          center: '109.50051,36.60332'
        }, {
          cityName: '榆林',
          center: '109.745926,38.279439'
        }]
      }, {
        airportCode: 'S',
        cityName: '四川',
        center: '102.89916,30.367481',
        cities: [{
          cityName: '成都',
          center: '104.067923,30.679943'
        }, {
          cityName: '阿坝州',
          center: '102.228565,31.905763'
        }, {
          cityName: '巴中',
          center: '106.757916,31.869189'
        }, {
          cityName: '达州',
          center: '107.494973,31.214199'
        }, {
          cityName: '德阳',
          center: '104.402398,31.13114'
        }, {
          cityName: '甘孜州',
          center: '101.969232,30.055144'
        }, {
          cityName: '广安',
          center: '106.63572,30.463984'
        }, {
          cityName: '广元',
          center: '105.819687,32.44104'
        }, {
          cityName: '乐山',
          center: '103.760824,29.600958'
        }, {
          cityName: '凉山州',
          center: '102.259591,27.892393'
        }, {
          cityName: '泸州',
          center: '105.44397,28.89593'
        }, {
          cityName: '南充',
          center: '106.105554,30.800965'
        }, {
          cityName: '眉山',
          center: '103.84143,30.061115'
        }, {
          cityName: '绵阳',
          center: '104.705519,31.504701'
        }, {
          cityName: '内江',
          center: '105.073056,29.599462'
        }, {
          cityName: '攀枝花',
          center: '101.722423,26.587571'
        }, {
          cityName: '遂宁',
          center: '105.564888,30.557491'
        }, {
          cityName: '雅安',
          center: '103.009356,29.999716'
        }, {
          cityName: '宜宾',
          center: '104.633019,28.769675'
        }, {
          cityName: '资阳',
          center: '104.63593,30.132191'
        }, {
          cityName: '自贡',
          center: '104.776071,29.359157'
        }]
      }, {
        airportCode: 'X',
        cityName: '西藏',
        center: '89.137982,31.367315|6',
        cities: [{
          cityName: '拉萨',
          center: '91.111891,29.662557'
        }, {
          cityName: '阿里地区',
          center: '81.107669,30.404557'
        }, {
          cityName: '昌都地区',
          center: '97.185582,31.140576'
        }, {
          cityName: '林芝地区',
          center: '94.349985,29.666941'
        }, {
          cityName: '那曲地区',
          center: '92.067018,31.48068'
        }, {
          cityName: '日喀则地区',
          center: '88.891486,29.269023'
        }, {
          cityName: '山南地区',
          center: '91.750644,29.229027'
        }]
      }, {
        airportCode: 'X',
        cityName: '新疆',
        center: '85.614899,42.127001|6',
        cities: [{
          cityName: '乌鲁木齐',
          center: '87.564988,43.84038'
        }, {
          cityName: '阿拉尔',
          center: '81.291737,40.61568'
        }, {
          cityName: '阿克苏地区',
          center: '80.269846,41.171731'
        }, {
          cityName: '阿勒泰地区',
          center: '88.137915,47.839744'
        }, {
          cityName: '巴音郭楞',
          center: '86.121688,41.771362'
        }, {
          cityName: '博尔塔拉州',
          center: '82.052436,44.913651'
        }, {
          cityName: '昌吉州',
          center: '87.296038,44.007058'
        }, {
          cityName: '哈密地区',
          center: '93.528355,42.858596'
        }, {
          cityName: '和田地区',
          center: '79.930239,37.116774'
        }, {
          cityName: '喀什地区',
          center: '75.992973,39.470627'
        }, {
          cityName: '克拉玛依',
          center: '84.88118,45.594331'
        }, {
          cityName: '克孜勒苏州',
          center: '76.137564,39.750346'
        }, {
          cityName: '石河子',
          center: '86.041865,44.308259'
        }, {
          cityName: '塔城地区',
          center: '82.974881,46.758684'
        }, {
          cityName: '图木舒克',
          center: '79.198155,39.889223'
        }, {
          cityName: '吐鲁番地区',
          center: '89.181595,42.96047'
        }, {
          cityName: '五家渠',
          center: '87.565449,44.368899'
        }, {
          cityName: '伊犁州',
          center: '81.297854,43.922248'
        }]
      }, {
        airportCode: 'Y',
        cityName: '云南',
        center: '101.592952,24.864213',
        cities: [{
          cityName: '昆明',
          center: '102.714601,25.049153'
        }, {
          cityName: '保山',
          center: '99.177996,25.120489'
        }, {
          cityName: '楚雄州',
          center: '101.529382,25.066356'
        }, {
          cityName: '大理州',
          center: '100.223675,25.5969'
        }, {
          cityName: '德宏州',
          center: '98.589434,24.44124'
        }, {
          cityName: '迪庆州',
          center: '99.713682,27.831029'
        }, {
          cityName: '红河州',
          center: '103.384065,23.367718'
        }, {
          cityName: '丽江',
          center: '100.229628,26.875351'
        }, {
          cityName: '临沧',
          center: '100.092613,23.887806'
        }, {
          cityName: '怒江州',
          center: '98.859932,25.860677'
        }, {
          cityName: '普洱',
          center: '100.980058,22.788778'
        }, {
          cityName: '曲靖',
          center: '103.782539,25.520758'
        }, {
          cityName: '昭通',
          center: '103.725021,27.340633'
        }, {
          cityName: '文山',
          center: '104.089112,23.401781'
        }, {
          cityName: '西双版纳',
          center: '100.803038,22.009433'
        }, {
          cityName: '玉溪',
          center: '102.545068,24.370447'
        }]
      }, {
        airportCode: 'Z',
        cityName: '浙江',
        center: '119.957202,29.159494',
        cities: [{
          cityName: '杭州',
          center: '120.219375,30.259244'
        }, {
          cityName: '湖州',
          center: '120.137243,30.877925'
        }, {
          cityName: '嘉兴',
          center: '120.760428,30.773992'
        }, {
          cityName: '金华',
          center: '119.652576,29.102899'
        }, {
          cityName: '丽水',
          center: '119.929576,28.4563'
        }, {
          cityName: '宁波',
          center: '121.579006,29.885259'
        }, {
          cityName: '衢州',
          center: '118.875842,28.95691'
        }, {
          cityName: '绍兴',
          center: '120.592467,30.002365'
        }, {
          cityName: '台州',
          center: '121.440613,28.668283'
        }, {
          cityName: '温州',
          center: '120.690635,28.002838'
        }, {
          cityName: '舟山',
          center: '122.169872,30.03601'
        }]
      },
      {
        airportCode: 'city',
        cityName: '直辖市',
        center: '119.957202,29.159494',
        cities: [{
          cityName: '北京',
          center: '116.40,39.90'
        }, {
          cityName: '天津',
          center: '117.20,39.12'
        }, {
          cityName: '上海',
          center: '121.47,31.23'
        }, {
          cityName: '重庆',
          center: '106.55,29.57'
        }]
      },
      {
        airportCode: 'HMT',
        cityName: '港澳台',
        center: '119.957202,29.159494',
        cities: [{
          cityName: '香港',
          center: '114.08,22.20'
        }, {
          cityName: '澳门',
          center: '113.33,22.13'
        }, {
          cityName: '台湾',
          center: '121.50,25.03'
        }]
      }
      ],
      lngLat: [],
      airportName: null,
      cityList: [
        { label: 'A', id: 'A' },
        { label: 'F', id: 'F' },
        { label: 'G', id: 'G' },
        { label: 'H', id: 'H' },
        { label: 'J', id: 'J' },
        { label: 'L', id: 'L' },
        { label: 'N', id: 'N' },
        { label: 'Q', id: 'Q' },
        { label: 'S', id: 'S' },
        { label: 'X', id: 'X' },
        { label: 'Y', id: 'Y' },
        { label: 'Z', id: 'Z' },
        { label: '直辖市', id: 'city' },
        { label: '港澳台', id: 'HMT' }
      ]
    }
  },
  watch: {
    lngLat: {
      handler (newV, oldV) {
        if (newV.length !== 0) {
          this.$emit('update:lngLat', newV)
        }
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    selectDepCity (row) {
      this.airportName = row.cityName
      let str = row.center
      let center = str.split(',')
      this.lngLat = center
    }
  }
}
</script>
<style scoped>
  #app{
    background: #efefef;
  }
  li{
    list-style: none;
  }
  label{
    display: block;
    margin-bottom: 5px !important;
    font-size: 16px !important;
    margin-left: 0 !important;
    color: #5f5f5f !important;
    margin-top: 5px;
  }
  li{
    padding: 0px 0 6px;
    float: left;
    text-align: left;
    font-size: 12px;
    min-width: 40px;
    margin-right: 5px;
    cursor: pointer;
  }
  .clearfix{
    content: '';
    display: block;
    clear: both;
  }
</style>

引用页面

<template>
	<City :lngLat.sync="lngLat" />
</template>
<script>
import City from '@/view/components/terminal/city'
	......
</script>

你可能感兴趣的:(vue,Java)