組件代碼
<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>