当前位置：网站首页>Scrollintoview realizes simple anchor location (example: select city list)

Scrollintoview realizes simple anchor location (example: select city list)

2022-07-27 20:35:00 【12 procedural ape】

Catalog

One 、 Introduce

scrollIntoView() Method use Rolling principle , To scroll the corresponding elements into the but area .

The first thing to say is , This method does not write standards , But most mainstream browsers already support or partially support its functions , So you can use , Of course, if the standard comes out one day , Then follow the standard .

The second thing to explain is , This is a js A native method ,jquery Such a framework cannot be used , therefore , The way to get elements must be document.getElementById or querySelector, Then you can point it out scrollIntoView() Method .

1. brief introduction

scrollIntoView() Method scrolls the element calling it to the visible area of the browser window

2. grammar 

element.scrollIntoView（）; //  Equate to element.scrollIntoView(true)
element.scrollIntoView（alignToTop）; // Boolean parameters 
element.scrollIntoView（scrollIntoViewOptions）; // Object parameters

Syntax parameters
Insert picture description here

3. Example 

var element = document.getElementById("box"); 
element.scrollIntoView();
element.scrollIntoView(false);
element.scrollIntoView({
    block: "end"});
element.scrollIntoView({
    behavior: "instant", block: "end", inline: "nearest"});

Be careful ： It depends on the layout of other elements , This element may not scroll completely to the top or bottom .

4. Browser compatibility

Insert picture description here

2. Application instance

With “ City selection list ” For example , Click the right side. A,B,C,… The first letter , List of corresponding cities Position to the top

2.1 html5 Code implementation 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="jQuery" />
<meta name="description" content=" demonstration XHTML、CSS、jquery、PHP Cases and examples " />
<title> The mobile terminal searches the list of cities by initials </title>
<style type="text/css">
  body {
    
    -webkit-text-size-adjust: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    background: #fff;
    font-size: 14px;
  }
  #shortcut {
    
      position: fixed;
      right: 0;
      font-family: Helvetica;
      top: 100px;
  }
  #shortcut .item {
    
      height: 12px;
      padding-top: 4px;
      padding-left: 24px;
      text-align: center;
      font-size: 12px;
      color: #fa8919;
  }
  ul{
    
    padding-inline-start: unset;
  }
  li {
    
      list-style: none;
  }
  .title{
    
    height: 28px;
    padding-left: 16px;
    line-height: 28px;
    background-color: #f5f5f5;
    font-family: Helvetica;
    font-size: 12px;
    color: #878787;
  }
  .cityItem {
    
      height: 44px;
      padding: 0 16px;
      line-height: 44px;
      font-size: 16px;
  }
  .cityItem .name {
    
      display: block;
      position: relative;
  }
  .cityItem .name:before,
  .cityItem .name:after {
    
      display: block;
      position: absolute;
      border-top: 1px solid #e5e5e5;
      left: 0;
      width: 100%;
      content: ' ';
  }
  .cityItem .name:before {
    
      display: none;
      top: 0;
  }
  .cityItem .name:after {
    
      display: block;
      bottom: 0;
  }
  .cityItem:active {
    
      background-color: #f0f0f0;
  }
  .cityItem:last-child .name:after {
    
      display: none;
  }
</style>
</head>

<body>
<div class="city">
  <div calss="cities-hook" id="cities">

  </div>
  <div calss="shortcut" id="shortcut">

  </div>
  
</div>   
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script src="js/city.js"></script>
<script>
var cities = document.getElementById('#cities');
var shortcut = document.getElementById('#shortcut');
function initCities() {
    
    console.log(cityData)
    var lists="";
    var en = '<ul>';
    cityData.forEach(function (group) {
    
      var name = group.name;
      lists += '<div class="title" id="title'+group.name.substr(0, 1)+'">'+name+'</div>'; 
      lists += '<ul style="margin-right: 6px;">';
        group.cities.forEach(function(g) {
    
          lists += '<li class="cityItem" data-name="'+ g.name +'" data-id="'+ g.cityid +'"><span class="border-1px name">'+ g.name +'</span></li>';
        });
      lists += '</ul>';

      var name = group.name.substr(0, 1);
      en += '<li data-anchor="'+name+'" class="item">'+name+'</li>';
    })
    en += '</ul>';
    $("#cities").html(lists);
    $("#shortcut").html(en);
}

initCities();

$('.item').on('click', function(){
    
    var val = $(this).attr('data-anchor');
    // Corresponding module   Roof placement 
    var curId="title"+val
    window.document.getElementById(curId).scrollIntoView();
   
});

</script>
</body>
</html>

2.2 City json data

city.js：

var cityData=[{
    name:"* Hot City ",cities:[{
    name:" The Beijing municipal ",tags:"BEIJING, The Beijing municipal ",cityid:1},{
    name:" Shanghai ",tags:"SHANGHAI, Shanghai ",cityid:4},{
    name:" shenzhen ",tags:"SHENZHEN, shenzhen ",cityid:2},{
    name:" guangzhou ",tags:"GUANGZHOU, guangzhou ",cityid:3},{
    name:" Wuhan City ",tags:"WUHAN, Wuhan City ",cityid:6}]},{
    name:"A",cities:[{
    name:" Anshan City ",tags:"ANSHAN, Anshan City ",cityid:64},{
    name:" Anqing City ",tags:"ANQING, Anqing City ",cityid:149},{
    name:" Anyang City ",tags:"ANYANG, Anyang City ",cityid:174},{
    name:" Alashan League ",tags:"ALASHANMENG, Alashan League ",cityid:202},{
    name:" aba ",tags:"ABAZHOU, aba ",cityid:290},{
    name:" Anshun City ",tags:"ANSHUN, Anshun City ",cityid:294},{
    name:" Ali area ",tags:"ALIDIQU, Ali area ",cityid:316},{
    name:" Ankang City ",tags:"ANKANG, Ankang City ",cityid:320},{
    name:" Aksu Area ",tags:"AKESUDIQU, Aksu Area ",cityid:348},{
    name:" Altay area ",tags:"ALETAIDIQU, Altay area ",cityid:355},{
    name:" Alar City ",tags:"ALAER, Alar City ",cityid:356}]},{
    name:"B",cities:[{
    name:" The Beijing municipal ",tags:"BEIJING, The Beijing municipal ",cityid:1},{
    name:" Baoding City ",tags:"BAODING, Baoding City ",cityid:62},{
    name:" Baotou city ",tags:"BAOTOU, Baotou city ",cityid:63},{
    name:" Benxi City ",tags:"BENXI, Benxi City ",cityid:77},{
    name:" Bengbu City ",tags:"BANGBU, Bengbu City ",cityid:100},{
    name:" Beihai City ",tags:"BEIHAI, Beihai City ",cityid:161},{
    name:" Binzhou City ",tags:"BINZHOU, Binzhou City ",cityid:166},{
    name:" Baoji City ",tags:"BAOJI, Baoji City ",cityid:170},{
    name:" Bozhou City ",tags:"BOZHOU, Bozhou City ",cityid:189},{
    name:" Bayannur City ",tags:"BAYANNAOER, Bayannur City ",cityid:199},{
    name:" Baishan City ",tags:"BAISHAN, Baishan City ",cityid:208},{
    name:" Baicheng City ",tags:"BAICHENG, Baicheng City ",cityid:210},{
    name:" Baise City ",tags:"BAISE, Baise City ",cityid:263},{
    name:" Baisha Li Autonomous County ",tags:"BAISHALIZUZIZHIXIAN, Baisha Li Autonomous County ",cityid:278},{
    name:" Bazhong City ",tags:"BAZHONG, Bazhong City ",cityid:288},{
    name:" Bijie district ",tags:"BIJIEDIQU, Bijie district ",cityid:296},{
    name:" Baoshan City ",tags:"BAOSHAN, Baoshan City ",cityid:301},{
    name:" Silver market ",tags:"BAIYIN, Silver market ",cityid:323},{
    name:" Bayinguolengzhou ",tags:"BAYINGUOLENGZHOU, Bayinguolengzhou ",cityid:350},{
    name:" Bortala ",tags:"BOERTALAZHOU, Bortala ",cityid:352}]},{
    name:"C",cities:[{
    name:" Chengdu ",tags:"CHENGDU, Chengdu ",cityid:17},{
    name:" Chongqing City ",tags:"CHONGQING, Chongqing City ",cityid:18},{
    name:" Changsha City ",tags:"CHANGSHA, Changsha City ",cityid:24},{
    name:" Changchun City ",tags:"CHANGCHUN, Changchun City ",cityid:25},{
    name:" Changzhou City ",tags:"CHANGZHOU, Changzhou City ",cityid:45},{
    name:" Cangzhou City ",tags:"CANGZHOU, Cangzhou City ",cityid:59},{
    name:" Chengde city ",tags:"CHENGDE, Chengde city ",cityid:72},{
    name:" Changde City ",tags:"CHANGDE, Changde City ",cityid:106},{
    name:" Chenzhou City ",tags:"CHENZHOU, Chenzhou City ",cityid:107},{
    name:" Changzhi City ",tags:"CHANGZHI, Changzhi City ",cityid:127},{
    name:" Chuzhou ",tags:"CHUZHOU, Chuzhou ",cityid:148},{
    name:" Chizhou City ",tags:"CHIZHOU, Chizhou City ",cityid:187},{
    name:" Chifeng City ",tags:"CHIFENG, Chifeng City ",cityid:196},{
    name:" Chaohu City ",tags:"CHAOHU, Chaohu City ",cityid:204},{
    name:" Chaoyang City ",tags:"CHAOYANG, Chaoyang City ",cityid:205},{
    name:" chaozhou ",tags:"CHAOZHOU, chaozhou ",cityid:257},{
    name:" Chongzuo City ",tags:"CHONGZUO, Chongzuo City ",cityid:267},{
    name:" Chengmai County ",tags:"CHENGMAIXIAN, Chengmai County ",cityid:274},{
    name:" Chuxiong state ",tags:"CHUXIONGZHOU, Chuxiong state ",cityid:308},{
    name:" Changdu district ",tags:"CHANGDUDIQU, Changdu district ",cityid:313},{
    name:" Changji ",tags:"CHANGJIZHOU, Changji ",cityid:351}]},{
    name:"D",cities:[{
    name:" Dalian ",tags:"DALIAN, Dalian ",cityid:14},{
    name:" Dongguan city, ",tags:"DONGWAN, Dongguan city, ",cityid:21},{
    name:" Daqing City ",tags:"DAQING, Daqing City ",cityid:48},{
    name:" Dongying City ",tags:"DONGYING, Dongying City ",cityid:73},{
    name:" Texas City ",tags:"DEZHOU, Texas City ",cityid:120},{
    name:" Datong ",tags:"DATONG, Datong ",cityid:125},{
    name:" Dali ",tags:"DALIZHOU, Dali ",cityid:136},{
    name:" Dandong City ",tags:"DANDONG, Dandong City ",cityid:163},{
    name:" deyang ",tags:"DEYANG, deyang ",cityid:173},{
    name:" Daxinganling area ",tags:"DAXINGANLINGDIQU, Daxinganling area ",cityid:218},{
    name:" Danzhou City ",tags:"DANZHOU, Danzhou City ",cityid:270},{
    name:" Oriental City ",tags:"DONGFANG, Oriental City ",cityid:273},{
    name:" Ding'an County ",tags:"DINGANXIAN, Ding'an County ",cityid:275},{
    name:" Dazhou city ",tags:"DAZHOU, Dazhou city ",cityid:285},{
    name:" Dehong ",tags:"DEHONGZHOU, Dehong ",cityid:309},{
    name:" Diqingzhou ",tags:"DIQINGZHOU, Diqingzhou ",cityid:311},{
    name:" Dingxi ",tags:"DINGXI, Dingxi ",cityid:330}]},{
    name:"E",cities:[{
    name:" Ordos City ",tags:"EERDUOSI, Ordos City ",cityid:43},{
    name:" Ezhou City ",tags:"EZHOU, Ezhou City ",cityid:230},{
    name:" Enshi ",tags:"ENSHIZHOU, Enshi ",cityid:235}]},{
    name:"F",cities:[{
    name:" Fuzhou City ",tags:"FUZHOU, Fuzhou City ",cityid:34},{
    name:" Foshan city, ",tags:"FOSHAN, Foshan city, ",cityid:36},{
    name:" Fushun City ",tags:"FUSHUN, Fushun City ",cityid:66},{
    name:" Fuxin City ",tags:"FUXIN, Fuxin City ",cityid:164},{
    name:" Fuyang City ",tags:"FUYANG, Fuyang City ",cityid:188},{
    name:" Fuzhou City ",tags:"FUZHOU, Fuzhou City ",cityid:223},{
    name:" Fangchenggang City ",tags:"FANGCHENGGANG, Fangchenggang City ",cityid:260}]},{
    name:"G",cities:[{
    name:" guangzhou ",tags:"GUANGZHOU, guangzhou ",cityid:3},{
    name:" Guiyang City ",tags:"GUIYANG, Guiyang City ",cityid:82},{
    name:" Ganzhou City ",tags:"GANZHOU, Ganzhou City ",cityid:102},{
    name:" Guilin ",tags:"GUILIN, Guilin ",cityid:135},{
    name:" Guigang City ",tags:"GUIGANG, Guigang City ",cityid:262},{
    name:" Guangyuan City ",tags:"GUANGYUAN, Guangyuan City ",cityid:280},{
    name:" Guang'an City ",tags:"GUANGAN, Guang'an City ",cityid:284},{
    name:" Ganzi ",tags:"GANZIZHOU, Ganzi ",cityid:291},{
    name:" Gannan ",tags:"GANNANZHOU, Gannan ",cityid:333},{
    name:" Guyuan City ",tags:"GUYUAN, Guyuan City ",cityid:336},{
    name:" Golog ",tags:"GUOLUOZHOU, Golog ",cityid:342}]},{
    name:"H",cities:[{
    name:" hangzhou ",tags:"HANGZHOU, hangzhou ",cityid:5},{
    name:" Hefei ",tags:"HEFEI, Hefei ",cityid:15},{
    name:" Harbin City ",tags:"HAERBIN, Harbin City ",cityid:16},{
    name:" Hohhot City ",tags:"HUHEHAOTE, Hohhot City ",cityid:41},{
    name:" Handan City ",tags:"HANDAN, Handan City ",cityid:60},{
    name:" Huludao City ",tags:"HULUDAO, Huludao City ",cityid:70},{
    name:" Hengshui City ",tags:"HENGSHUI, Hengshui City ",cityid:80},{
    name:" Haikou City ",tags:"HAIKOU, Haikou City ",cityid:83},{
    name:" Huzhou City ",tags:"HUZHOU, Huzhou City ",cityid:90},{
    name:" Huai'an City ",tags:"HUAIAN, Huai'an City ",cityid:97},{
    name:" Hengyang City ",tags:"HENGYANG, Hengyang City ",cityid:105},{
    name:" Hanzhong City ",tags:"HANZHONG, Hanzhong City ",cityid:115},{
    name:" Heze City ",tags:"HEZE, Heze City ",cityid:124},{
    name:" huizhou ",tags:"HUIZHOU, huizhou ",cityid:133},{
    name:" Huangshan City ",tags:"HUANGSHAN, Huangshan City ",cityid:141},{
    name:" Huainan City ",tags:"HUAINAN, Huainan City ",cityid:150},{
    name:" Huaibei City ",tags:"HUAIBEI, Huaibei City ",cityid:183},{
    name:" Hulunbuir city ",tags:"HULUNBEIER, Hulunbuir city ",cityid:198},{
    name:" Hegang City ",tags:"HEGANG, Hegang City ",cityid:212},{
    name:" Heihe City ",tags:"HEIHE, Heihe City ",cityid:217},{
    name:" Huangshi City ",tags:"HUANGSHI, Huangshi City ",cityid:227},{
    name:" Huanggang City ",tags:"HUANGGANG, Huanggang City ",cityid:232},{
    name:" Huaihua City ",tags:"HUAIHUA, Huaihua City ",cityid:244},{
    name:" Hebi City ",tags:"HEBI, Hebi City ",cityid:247},{
    name:" Heyuan City ",tags:"HEYUAN, Heyuan City ",cityid:254},{
    name:" Hezhou City ",tags:"HEZHOU, Hezhou City ",cityid:264},{
    name:" Hechi City ",tags:"HECHI, Hechi City ",cityid:265},{
    name:" Honghe state ",tags:"HONGHEZHOU, Honghe state ",cityid:306},{
    name:" Haidong area ",tags:"HAIDONGDIQU, Haidong area ",cityid:338},{
    name:" Haibei ",tags:"HAIBEIZHOU, Haibei ",cityid:339},{
    name:" Huangnan ",tags:"HUANGNANZHOU, Huangnan ",cityid:340},{
    name:" Hainan ",tags:"HAINANZHOU, Hainan ",cityid:341},{
    name:" Haixi ",tags:"HAIXIZHOU, Haixi ",cityid:344},{
    name:" Hami district ",tags:"HAMIDIQU, Hami district ",cityid:346},{
    name:" Hotan Area ",tags:"HETIANDIQU, Hotan Area ",cityid:347}]},{
    name:"J",cities:[{
    name:" Jinan City ",tags:"JINAN, Jinan City ",cityid:12},{
    name:" Jinzhou City ",tags:"JINZHOU, Jinzhou City ",cityid:68},{
    name:" Jinzhong City ",tags:"JINZHONG, Jinzhong City ",cityid:71},{
    name:" Jilin city ",tags:"JILIN, Jilin city ",cityid:74},{
    name:" Jining City ",tags:"JINING, Jining City ",cityid:79},{
    name:" Jinhua City ",tags:"JINHUA, Jinhua City ",cityid:86},{
    name:" Jiaxing City ",tags:"JIAXING, Jiaxing City ",cityid:88},{
    name:" Jiujiang City ",tags:"JIUJIANG, Jiujiang City ",cityid:101},{
    name:" Jingzhou City ",tags:"JINGZHOU, Jingzhou City ",cityid:109},{
    name:" Jingdezhen City ",tags:"JINGDEZHEN, Jingdezhen City ",cityid:151},{
    name:" jiangmen ",tags:"JIANGMEN, jiangmen ",cityid:153},{
    name:" Jieyang city ",tags:"JIEYANG, Jieyang city ",cityid:154},{
    name:" Jiaozuo City ",tags:"JIAOZUO, Jiaozuo City ",cityid:175},{
    name:" Jincheng City ",tags:"JINCHENG, Jincheng City ",cityid:190},{
    name:" Jixi City ",tags:"JIXI, Jixi City ",cityid:211},{
    name:" Jiamusi City ",tags:"JIAMUSI, Jiamusi City ",cityid:215},{
    name:" Ji'an City ",tags:"JIAN, Ji'an City ",cityid:221},{
    name:" Jingmen City ",tags:"JINGMEN, Jingmen City ",cityid:229},{
    name:" Jiyuan City ",tags:"JIYUAN, Jiyuan City ",cityid:252},{
    name:" Jinchang ",tags:"JINCHANG, Jinchang ",cityid:322},{
    name:" Jiayuguan City ",tags:"JIAYUGUAN, Jiayuguan City ",cityid:324},{
    name:" Jiuquan City ",tags:"JIUQUAN, Jiuquan City ",cityid:328}]},{
    name:"K",cities:[{
    name:" Kunming ",tags:"KUNMING, Kunming ",cityid:19},{
    name:" Kaifeng City ",tags:"KAIFENG, Kaifeng City ",cityid:110},{
    name:" Kashgar area ",tags:"KASHIDIQU, Kashgar area ",cityid:179},{
    name:" Karamay City ",tags:"KELAMAYI, Karamay City ",cityid:180},{
    name:" Kizilsu Kho state ",tags:"KEZILESUKEZHOU, Kizilsu Kho state ",cityid:349}]},{
    name:"L",cities:[{
    name:" Luoyang City ",tags:"LUOYANG, Luoyang City ",cityid:27},{
    name:" Lanzhou city ",tags:"LANZHOU, Lanzhou city ",cityid:30},{
    name:" Langfang City ",tags:"LANGFANG, Langfang City ",cityid:46},{
    name:" Linyi City ",tags:"LINYI, Linyi City ",cityid:58},{
    name:" Liaoyang City ",tags:"LIAOYANG, Liaoyang City ",cityid:75},{
    name:" Lianyungang City ",tags:"LIANYUNGANG, Lianyungang City ",cityid:96},{
    name:" Luzhou City ",tags:"LUZHOU, Luzhou City ",cityid:117},{
    name:" Laiwu City ",tags:"LAIWU, Laiwu City ",cityid:122},{
    name:" Liaocheng City ",tags:"LIAOCHENG, Liaocheng City ",cityid:123},{
    name:" Liuzhou City ",tags:"LIUZHOU, Liuzhou City ",cityid:134},{
    name:" Lijiang City ",tags:"LIJIANG, Lijiang City ",cityid:137},{
    name:" Lishui City ",tags:"LISHUI, Lishui City ",cityid:139},{
    name:" Lhasa ",tags:"LASA, Lhasa ",cityid:178},{
    name:" Lu'an City ",tags:"LIUAN, Lu'an City ",cityid:186},{
    name:" Linfen City ",tags:"LINFEN, Linfen City ",cityid:193},{
    name:" Luliang City ",tags:"LVLIANG, Luliang City ",cityid:194},{
    name:" Liaoyuan City ",tags:"LIAOYUAN, Liaoyuan City ",cityid:206},{
    name:" Longyan City ",tags:"LONGYAN, Longyan City ",cityid:226},{
    name:" Loudi City ",tags:"LOUDI, Loudi City ",cityid:245},{
    name:" Luohe City ",tags:"LUOHE, Luohe City ",cityid:248},{
    name:" Laibin City ",tags:"LAIBIN, Laibin City ",cityid:266},{
    name:" Lingao County ",tags:"LINGAOXIAN, Lingao County ",cityid:277},{
    name:" Leshan City ",tags:"LESHAN, Leshan City ",cityid:283},{
    name:" Liangshan state ",tags:"LIANGSHANZHOU, Liangshan state ",cityid:292},{
    name:" Liupanshui City ",tags:"LIUPANSHUI, Liupanshui City ",cityid:293},{
    name:" Lincang City ",tags:"LINCANG, Lincang City ",cityid:304},{
    name:" Linzhi Area ",tags:"LINZHIDIQU, Linzhi Area ",cityid:317},{
    name:" Longnan City ",tags:"LONGNAN, Longnan City ",cityid:331},{
    name:" Linxiazhou ",tags:"LINXIAZHOU, Linxiazhou ",cityid:332}]},{
    name:"M",cities:[{
    name:" Mianyang City ",tags:"MIANYANG, Mianyang City ",cityid:50},{
    name:" Ma'anshan City ",tags:"MAANSHAN, Ma'anshan City ",cityid:99},{
    name:" Mudanjiang City ",tags:"MUDANJIANG, Mudanjiang City ",cityid:129},{
    name:" maoming ",tags:"MAOMING, maoming ",cityid:155},{
    name:" Meizhou City ",tags:"MEIZHOU, Meizhou City ",cityid:156},{
    name:" Meishan City ",tags:"MEISHAN, Meishan City ",cityid:286}]},{
    name:"N",cities:[{
    name:" nanjing ",tags:"NANJING, nanjing ",cityid:11},{
    name:" Ningbo City ",tags:"NINGBO, Ningbo City ",cityid:20},{
    name:" Nanning city ",tags:"NANNING, Nanning city ",cityid:33},{
    name:" Nanchang City ",tags:"NANCHANG, Nanchang City ",cityid:38},{
    name:" Nanchong City ",tags:"NANCHONG, Nanchong City ",cityid:53},{
    name:" Nantong City ",tags:"NANTONG, Nantong City ",cityid:92},{
    name:" Nanyang city ",tags:"NANYANG, Nanyang city ",cityid:113},{
    name:" Ningde City ",tags:"NINGDE, Ningde City ",cityid:144},{
    name:" Nanping City ",tags:"NANPING, Nanping City ",cityid:145},{
    name:" Neijiang City ",tags:"NEIJIANG, Neijiang City ",cityid:282},{
    name:" Nujiang State ",tags:"NUJIANGZHOU, Nujiang State ",cityid:310},{
    name:" Naqu district ",tags:"NAQUDIQU, Naqu district ",cityid:312}]},{
    name:"P",cities:[{
    name:" Pingdingshan City ",tags:"PINGDINGSHAN, Pingdingshan City ",cityid:103},{
    name:" Panzhihua City ",tags:"PANZHIHUA, Panzhihua City ",cityid:119},{
    name:" Putian City ",tags:"PUTIAN, Putian City ",cityid:143},{
    name:" Panjin City ",tags:"PANJIN, Panjin City ",cityid:165},{
    name:" Puyang City ",tags:"PUYANG, Puyang City ",cityid:176},{
    name:" Pingxiang City ",tags:"PINGXIANG, Pingxiang City ",cityid:219},{
    name:" Pu'er City ",tags:"PUER, Pu'er City ",cityid:303},{
    name:" Pingliang City ",tags:"PINGLIANG, Pingliang City ",cityid:327}]},{
    name:"Q",cities:[{
    name:" Qingdao ",tags:"QINGDAO, Qingdao ",cityid:13},{
    name:" Quanzhou City ",tags:"QUANZHOU, Quanzhou City ",cityid:35},{
    name:" Qinhuangdao City ",tags:"QINHUANGDAO, Qinhuangdao City ",cityid:61},{
    name:" Qiqihar City ",tags:"QIQIHAER, Qiqihar City ",cityid:65},{
    name:" Qujing City ",tags:"QUJING, Qujing City ",cityid:138},{
    name:" Quzhou City ",tags:"QUZHOU, Quzhou City ",cityid:140},{
    name:" Qingyuan City ",tags:"QINGYUAN, Qingyuan City ",cityid:157},{
    name:" Qitaihe City ",tags:"QITAIHE, Qitaihe City ",cityid:216},{
    name:" Qianjiang City ",tags:"QIANJIANG, Qianjiang City ",cityid:238},{
    name:" Qinzhou City ",tags:"QINZHOU, Qinzhou City ",cityid:261},{
    name:" Qionghai City ",tags:"QIONGHAI, Qionghai City ",cityid:269},{
    name:" Qianxinan Prefecture ",tags:"QIANXINANZHOU, Qianxinan Prefecture ",cityid:297},{
    name:" Qiandongnan Prefecture ",tags:"QIANDONGNANZHOU, Qiandongnan Prefecture ",cityid:298},{
    name:" Qiannan Prefecture ",tags:"QIANNANZHOU, Qiannan Prefecture ",cityid:299},{
    name:" Qingyang City ",tags:"QINGYANG, Qingyang City ",cityid:329}]},{
    name:"R",cities:[{
    name:" Rizhao City ",tags:"RIZHAO, Rizhao City ",cityid:167},{
    name:" Shigatse area ",tags:"RIKAZEDIQU, Shigatse area ",cityid:315}]},{
    name:"S",cities:[{
    name:" shenzhen ",tags:"SHENZHEN, shenzhen ",cityid:2},{
    name:" Shanghai ",tags:"SHANGHAI, Shanghai ",cityid:4},{
    name:" Shenyang ",tags:"SHENYANG, Shenyang ",cityid:8},{
    name:" Shijiazhuang city ",tags:"SHIJIAZHUANG, Shijiazhuang city ",cityid:22},{
    name:" Suzhou City ",tags:"SUZHOU, Suzhou City ",cityid:23},{
    name:" The city of Sanya ",tags:"SANYA, The city of Sanya ",cityid:37},{
    name:" Shaoxing City ",tags:"SHAOXING, Shaoxing City ",cityid:89},{
    name:" Suihua City ",tags:"SUIHUA, Suihua City ",cityid:128},{
    name:" Siping City ",tags:"SIPING, Siping City ",cityid:130},{
    name:" Suqian City ",tags:"SUQIAN, Suqian City ",cityid:147},{
    name:" Shantou city ",tags:"SHANTOU, Shantou city ",cityid:158},{
    name:" Shangqiu City ",tags:"SHANGQIU, Shangqiu City ",cityid:177},{
    name:" Shihezi City ",tags:"SHIHEZI, Shihezi City ",cityid:181},{
    name:" Suzhou City ",tags:"SUZHOU, Suzhou City ",cityid:185},{
    name:" Shuozhou City ",tags:"SHUOZHOU, Shuozhou City ",cityid:191},{
    name:" Songyuan City ",tags:"SONGYUAN, Songyuan City ",cityid:209},{
    name:" Shuangyashan City ",tags:"SHUANGYASHAN, Shuangyashan City ",cityid:213},{
    name:" Shangrao City ",tags:"SHANGRAO, Shangrao City ",cityid:224},{
    name:" Sanming City ",tags:"SANMING, Sanming City ",cityid:225},{
    name:" Shiyan City ",tags:"SHIYAN, Shiyan City ",cityid:228},{
    name:" Suizhou City ",tags:"SUIZHOU, Suizhou City ",cityid:234},{
    name:" Shennongjia forest area ",tags:"SHENNONGJIALINQU, Shennongjia forest area ",cityid:239},{
    name:" Shaoyang City ",tags:"SHAOYANG, Shaoyang City ",cityid:240},{
    name:" Sanmenxia City ",tags:"SANMENXIA, Sanmenxia City ",cityid:249},{
    name:" Shaoguan City ",tags:"SHAOGUAN, Shaoguan City ",cityid:253},{
    name:" Shanwei cities ",tags:"SHANWEI, Shanwei cities ",cityid:255},{
    name:" Suining City ",tags:"SUINING, Suining City ",cityid:281},{
    name:" Shannan Area ",tags:"SHANNANDIQU, Shannan Area ",cityid:314},{
    name:" Shangluo city ",tags:"SHANGLUO, Shangluo city ",cityid:321},{
    name:" Shizuishan City ",tags:"SHIZUISHAN, Shizuishan City ",cityid:334}]},{
    name:"T",cities:[{
    name:" tianjin ",tags:"TIANJIN, tianjin ",cityid:7},{
    name:" Taiyuan City ",tags:"TAIYUAN, Taiyuan City ",cityid:26},{
    name:" Tangshan City ",tags:"TANGSHAN, Tangshan City ",cityid:40},{
    name:" Tieling City ",tags:"TIELING, Tieling City ",cityid:69},{
    name:" Taizhou City ",tags:"TAIZHOU, Taizhou City ",cityid:87},{
    name:" Taizhou City ",tags:"TAIZHOU, Taizhou City ",cityid:95},{
    name:" Tai'an City ",tags:"TAIAN, Tai'an City ",cityid:121},{
    name:" Tianshui City ",tags:"TIANSHUI, Tianshui City ",cityid:169},{
    name:" tongling ",tags:"TONGLING, tongling ",cityid:184},{
    name:" Tongliao City ",tags:"TONGLIAO, Tongliao City ",cityid:197},{
    name:" Tonghua City ",tags:"TONGHUA, Tonghua City ",cityid:207},{
    name:" Tianmen City ",tags:"TIANMEN, Tianmen City ",cityid:237},{
    name:" Tunchang County ",tags:"TUNCHANGXIAN, Tunchang County ",cityid:276},{
    name:" Tongren district ",tags:"TONGRENDIQU, Tongren district ",cityid:295},{
    name:" Tongchuan City ",tags:"TONGCHUAN, Tongchuan City ",cityid:318},{
    name:" Turpan area ",tags:"TULUFANDIQU, Turpan area ",cityid:345},{
    name:" Tacheng area ",tags:"TACHENGDIQU, Tacheng area ",cityid:354}]},{
    name:"W",cities:[{
    name:" Wuhan City ",tags:"WUHAN, Wuhan City ",cityid:6},{
    name:" Weihai City ",tags:"WEIHAI, Weihai City ",cityid:42},{
    name:" Wuxi City ",tags:"WUXI, Wuxi City ",cityid:47},{
    name:" Urumqi ",tags:"WULUMUQI, Urumqi ",cityid:52},{
    name:" Weifang City ",tags:"WEIFANG, Weifang City ",cityid:81},{
    name:" Wenzhou City ",tags:"WENZHOU, Wenzhou City ",cityid:85},{
    name:" Wuhu City ",tags:"WUHU, Wuhu City ",cityid:98},{
    name:" Wuhai City ",tags:"WUHAI, Wuhai City ",cityid:195},{
    name:" Ulanchab city ",tags:"WULANCHABU, Ulanchab city ",cityid:200},{
    name:" Wuzhou City ",tags:"WUZHOU, Wuzhou City ",cityid:259},{
    name:" Five Fingers Group City ",tags:"WUZHISHAN, Five Fingers Group City ",cityid:268},{
    name:" Wenchang City ",tags:"WENCHANG, Wenchang City ",cityid:271},{
    name:" Wanning City ",tags:"WANNING, Wanning City ",cityid:272},{
    name:" Wenshan state ",tags:"WENSHANZHOU, Wenshan state ",cityid:305},{
    name:" Weinan ",tags:"WEINAN, Weinan ",cityid:319},{
    name:" Wuwei City ",tags:"WUWEI, Wuwei City ",cityid:325},{
    name:" Wuzhong City ",tags:"WUZHONG, Wuzhong City ",cityid:335}]},{
    name:"X",cities:[{
    name:" Xi'an City ",tags:"XIAN, Xi'an City ",cityid:10},{
    name:" Xining City ",tags:"XINING, Xining City ",cityid:28},{
    name:" Xiamen City ",tags:"XIAMEN, Xiamen City ",cityid:32},{
    name:" Xuzhou City ",tags:"XUZHOU, Xuzhou City ",cityid:39},{
    name:" Xiangtan City ",tags:"XIANGTAN, Xiangtan City ",cityid:55},{
    name:" Xingtai City ",tags:"XINGTAI, Xingtai City ",cityid:67},{
    name:" Xiangyang City ",tags:"XIANGYANG, Xiangyang City ",cityid:108},{
    name:" Xinxiang City ",tags:"XINXIANG, Xinxiang City ",cityid:111},{
    name:" Xuchang City ",tags:"XUCHANG, Xuchang City ",cityid:112},{
    name:" Xianyang city ",tags:"XIANYANG, Xianyang city ",cityid:116},{
    name:" Xinyu City ",tags:"XINYU, Xinyu City ",cityid:152},{
    name:" Xuancheng City ",tags:"XUANCHENG, Xuancheng City ",cityid:182},{
    name:" Xinzhou City ",tags:"XINZHOU, Xinzhou City ",cityid:192},{
    name:" Xilingol League ",tags:"XILINGUOLEMENG, Xilingol League ",cityid:201},{
    name:" UNITA ",tags:"XINGANMENG, UNITA ",cityid:203},{
    name:" Xiaogan City ",tags:"XIAOGAN, Xiaogan City ",cityid:231},{
    name:" Xianning City ",tags:"XIANNING, Xianning City ",cityid:233},{
    name:" Xiantao City ",tags:"XIANTAO, Xiantao City ",cityid:236},{
    name:" Xiangxi ",tags:"XIANGXIZHOU, Xiangxi ",cityid:246},{
    name:" Xinyang City ",tags:"XINYANG, Xinyang City ",cityid:250},{
    name:" Xishuangbanna ",tags:"XISHUANGBANNAZHOU, Xishuangbanna ",cityid:307}]},{
    name:"Y",cities:[{
    name:" Yantai City ",tags:"YANTAI, Yantai City ",cityid:29},{
    name:" Yinchuan City ",tags:"YINCHUAN, Yinchuan City ",cityid:49},{
    name:" yichang ",tags:"YICHANG, yichang ",cityid:51},{
    name:" Yueyang City ",tags:"YUEYANG, Yueyang City ",cityid:56},{
    name:" Yingkou City ",tags:"YINGKOU, Yingkou City ",cityid:76},{
    name:" Yangzhou City ",tags:"YANGZHOU, Yangzhou City ",cityid:91},{
    name:" Yancheng City ",tags:"YANCHENG, Yancheng City ",cityid:94},{
    name:" Yuncheng City ",tags:"YUNCHENG, Yuncheng City ",cityid:104},{
    name:" Yibin City ",tags:"YIBIN, Yibin City ",cityid:118},{
    name:" Yangquan City ",tags:"YANGQUAN, Yangquan City ",cityid:126},{
    name:" Yanji city ",tags:"YANJI, Yanji city ",cityid:131},{
    name:" Yulin City ",tags:"YULIN, Yulin City ",cityid:162},{
    name:" Yan'an City ",tags:"YANAN, Yan'an City ",cityid:171},{
    name:" Yulin City ",tags:"YULIN, Yulin City ",cityid:172},{
    name:" Yichun City ",tags:"YICHUN, Yichun City ",cityid:214},{
    name:" Yingtan City ",tags:"YINGTAN, Yingtan City ",cityid:220},{
    name:" Yichun City ",tags:"YICHUN, Yichun City ",cityid:222},{
    name:" Yiyang City ",tags:"YIYANG, Yiyang City ",cityid:242},{
    name:" Yongzhou City ",tags:"YONGZHOU, Yongzhou City ",cityid:243},{
    name:" yangjiang ",tags:"YANGJIANG, yangjiang ",cityid:256},{
    name:" Yunfu City ",tags:"YUNFU, Yunfu City ",cityid:258},{
    name:" Ya'an City ",tags:"YAAN, Ya'an City ",cityid:287},{
    name:" Yuxi City ",tags:"YUXI, Yuxi City ",cityid:300},{
    name:" Yushu state ",tags:"YUSHUZHOU, Yushu state ",cityid:343},{
    name:" Ili State ",tags:"YILIZHOU, Ili State ",cityid:353}]},{
    name:"Z",cities:[{
    name:" Zhengzhou city ",tags:"ZHENGZHOU, Zhengzhou city ",cityid:9},{
    name:" Zunyi City ",tags:"ZUNYI, Zunyi City ",cityid:44},{
    name:" Zhuzhou City ",tags:"ZHUZHOU, Zhuzhou City ",cityid:54},{
    name:" Zibo City ",tags:"ZIBO, Zibo City ",cityid:57},{
    name:" Zhangjiakou City ",tags:"ZHANGJIAKOU, Zhangjiakou City ",cityid:78},{
    name:" zhuhai ",tags:"ZHUHAI, zhuhai ",cityid:84},{
    name:" Zhenjiang City ",tags:"ZHENJIANG, Zhenjiang City ",cityid:93},{
    name:" Zhoukou City ",tags:"ZHOUKOU, Zhoukou City ",cityid:114},{
    name:" Zhongshan city, ",tags:"ZHONGSHAN, Zhongshan city, ",cityid:132},{
    name:" Zhangzhou City ",tags:"ZHANGZHOU, Zhangzhou City ",cityid:142},{
    name:" Zhoushan City ",tags:"ZHOUSHAN, Zhoushan City ",cityid:146},{
    name:" zhanjiang ",tags:"ZHANJIANG, zhanjiang ",cityid:159},{
    name:" Zhaoqing city ",tags:"ZHAOQING, Zhaoqing city ",cityid:160},{
    name:" Zaozhuang City ",tags:"ZAOZHUANG, Zaozhuang City ",cityid:168},{
    name:" Zhangjiajie City ",tags:"ZHANGJIAJIE, Zhangjiajie City ",cityid:241},{
    name:" Zhumadian City ",tags:"ZHUMADIAN, Zhumadian City ",cityid:251},{
    name:" Zigong City ",tags:"ZIGONG, Zigong City ",cityid:279},{
    name:" Ziyang City ",tags:"ZIYANG, Ziyang City ",cityid:289},{
    name:" Zhaotong City ",tags:"ZHAOTONG, Zhaotong City ",cityid:302},{
    name:" Zhangye City ",tags:"ZHANGYE, Zhangye City ",cityid:326},{
    name:" Zhongwei City ",tags:"ZHONGWEI, Zhongwei City ",cityid:337}]}];

2.3 effect

Insert picture description here

原网站

版权声明
本文为[12 procedural ape]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/199/202207151411437000.html

边栏推荐

猜你喜欢

随机推荐