页面效果：
1.在网上找到了一个已经包含的城市数据，这个可以自己在网上找，根据数据格式对应的渲染
add.js
module.exports = {"A":{"key":"A","item":[{"city":"\u5b89\u5e86","N":"30.31","E":"117.02","firststr":"A"},{"city":"\u6fb3\u95e8\u5e02","N":"21.33","E":"115.07","firststr":"A"},{"city":"\u963f\u514b\u82cf","N":"41.09","E":"80.19","firststr":"A"},{"city":"\u963f\u52d2\u6cf0","N":"47.5","E":"88.12","firststr":"A"},{"city":"\u963f\u56fe\u4ec0","N":"39.42","E":"76.08","firststr":"A"},{"city":"\u5b89\u987a","N":"26.14","E":"105.55","firststr":"A"},{"city":"\u978d\u5c71","N":"41.07","E":"123","firststr":"A"},{"city":"\u5b89\u56fd","N":"38.24","E":"115.2","firststr":"A"},{"city":"\u5b89\u9633","N":"36.06","E":"114.21","firststr":"A"},{"city":"\u5b89\u4e18","N":"36.25","E":"119.12","firststr":"A"},{"city":"\u963f\u57ce","N":"45.32","E":"126.58","firststr":"A"},{"city":"\u5b89\u8fbe","N":"46.24","E":"125.18","firststr":"A"},{"city":"\u5b89\u9646","N":"31.15","E":"113.41","firststr":"A"},{"city":"\u5b89\u5eb7","N":"32.41","E":"109.01","firststr":"A"}]},"B":{"key":"B","item":[{"city":"\u868c\u57e0","N":"32.56","E":"117.21","firststr":"B"},{"city":"\u5df4\u4e2d","N":"31.51","E":"106.43","firststr":"B"},{"city":"\u5317\u4eac\u5e02","N":"39.55","E":"116.24","firststr":"B"},{"city":"\u767d\u94f6","N":"36.33","E":"104.12","firststr":"B"},{"city":"\u767d\u57ce","N":"45.38","E":"122.5","firststr":"B"},{"city":"\u767d\u5c71","N":"41.56","E":"126.26","firststr":"B"},{"city":"\u535a\u4e50","N":"44.57","E":"82.08","firststr":"B"},{"city":"\u4fdd\u5c71","N":"25.08","E":"99.1","firststr":"B"},{"city":"\u5317\u6d77","N":"21.28","E":"109.07","firststr":"B"},{"city":"\u5317\u6d41","N":"22.42","E":"110.21","firststr":"B"},{"city":"\u767e\u8272","N":"23.54","E":"106.36","firststr":"B"},{"city":"\u6bd5\u8282","N":"27.18","E":"105.18","firststr":"B"},{"city":"\u5317\u7968","N":"41.48","E":"120.47","firststr":"B"},{"city":"\u672c\u6eaa","N":"41.18","E":"123.46","firststr":"B"},{"city":"\u4fdd\u5b9a","N":"38.51","E":"115.3","firststr":"B"},{"city":"\u9738\u5dde","N":"39.06","E":"116.24","firststr":"B"},{"city":"\u6cca\u5934","N":"38.04","E":"116.34","firststr":"B"},{"city":"\u5305\u5934","N":"40.39","E":"109.49","firststr":"B"},{"city":"\u6ee8\u5dde","N":"37.22","E":"118.02","firststr":"B"},{"city":"\u5317\u5b89","N":"48.15","E":"126.31","firststr":"B"},{"city":"\u5b9d\u9e21","N":"34.22","E":"107.09","firststr":"B"}]},"C":{"key":"C","item":[{"city":"\u5de2\u6e56","N":"31.36","E":"117.52","firststr":"C"},{"city":"\u6ec1\u5dde","N":"32.18","E":"118.18","firststr":"C"},{"city":"\u6210\u90fd\u5e02","N":"30.4","E":"104.04","firststr":"C"},{"city":"\u5d07\u5dde","N":"30.39","E":"103.4","firststr":"C"},{"city":"\u957f\u6c99","N":"28.12","E":"112.59","firststr":"C"},{"city":"\u5e38\u5fb7","N":"29.02","E":"111.51","firststr":"C"},{"city":"\u90f4\u5dde","N":"25.46","E":"113.02","firststr":"C"},{"city":"\u957f\u4e50","N":"25.58","E":"119.31","firststr":"C"},{"city":"\u957f\u6625","N":"43.54","E":"125.19","firststr":"C"},{"city":"\u660c\u5409","N":"44.02","E":"87.18","firststr":"C"},{"city":"\u6f6e\u9633","N":"23.16","E":"116.36","firststr":"C"},{"city":"\u6f6e\u5dde","N":"23.4","E":"116.38","firststr":"C"},{"city":"\u6f84\u6d77","N":"23.28","E":"116.46","firststr":"C"},{"city":"\u4ece\u5316","N":"23.33","E":"113.33","firststr":"C"},{"city":"\u695a\u96c4","N":"25.01","E":"101.32","firststr":"C"},{"city":"\u5e38\u719f","N":"31.39","E":"120.43","firststr":"C"},{"city":"\u5e38\u5dde","N":"31.47","E":"119.58","firststr":"C"},{"city":"\u6148\u6eaa","N":"30.11","E":"121.15","firststr":"C"},{"city":"\u8d64\u6c34","N":"28.34","E":"105.42","firststr":"C"},{"city":"\u671d\u9633","N":"41.34","E":"120.27","firststr":"C"},{"city":"\u6ca7\u5dde","N":"38.18","E":"116.52","firststr":"C"},{"city":"\u627f\u5fb7","N":"40.59","E":"117.57","firststr":"C"},{"city":"\u8d64\u5cf0","N":"42.17","E":"118.58","firststr":"C"},{"city":"\u957f\u845b","N":"34.12","E":"113.47","firststr":"C"},{"city":"\u660c\u9091","N":"39.52","E":"119.24","firststr":"C"},{"city":"\u957f\u6cbb","N":"36.11","E":"113.06","firststr":"C"}]},"D":{"key":"D","item":[{"city":"\u8fbe\u5ddd","N":"31.14","E":"107.29","firststr":"D"},{"city":"\u5fb7\u9633","N":"31.09","E":"104.22","firststr":"D"},{"city":"\u90fd\u6c5f\u5830","N":"31.01","E":"103.37","firststr":"D"},{"city":"\u6566\u714c","N":"40.08","E":"94.41","firststr":"D"},{"city":"\u5927\u5b89","N":"45.3","E":"124.18","firststr":"D"},{"city":"\u5fb7\u60e0","N":"44.32","E":"125.42","firststr":"D"},{"city":"\u6566\u5316","N":"43.22","E":"128.13","firststr":"D"},{"city":"\u4e1c\u839e","N":"23.02","E":"113.45","firststr":"D"},{"city":"\u5927\u7406","N":"25.34","E":"100.13","firststr":"D"},{"city":"\u4e1c\u5ddd","N":"26.06","E":"103.12","firststr":"D"},{"city":"\u4e39\u9633","N":"32","E":"119.32","firststr":"D"},{"city":"\u4e1c\u53f0","N":"32.51","E":"120.19","firststr":"D"},{"city":"\u4e1c\u9633","N":"29.16","E":"120.14","firststr":"D"},{"city":"\u5fb7\u5174","N":"28.57","E":"117.35","firststr":"D"},{"city":"\u90fd\u5300","N":"26.15","E":"107.31","firststr":"D"},{"city":"\u5927\u8fde","N":"38.55","E":"121.36","firststr":"D"},{"city":"\u4e39\u4e1c","N":"40.08","E":"124.22","firststr":"D"},{"city":"\u5927\u77f3\u6865","N":"40.37","E":"122.31","firststr":"D"},{"city":"\u4e1c\u6e2f","N":"39.53","E":"124.08","firststr":"D"},{"city":"\u5b9a\u5dde","N":"38.3","E":"115","firststr":"D"},{"city":"\u4e1c\u80dc","N":"39.48","E":"109.59","firststr":"D"},{"city":"\u767b\u5c01","N":"34.27","E":"113.02","firststr":"D"},{"city":"\u9093\u5dde","N":"32.42","E":"112.05","firststr":"D"},{"city":"\u5fb7\u4ee4\u54c8","N":"37.22","E":"97.23","firststr":"D"},{"city":"\u5fb7\u5dde","N":"37.26","E":"116.17","firststr":"D"},{"city":"\u4e1c\u8425","N":"37.27","E":"118.3","firststr":"D"},{"city":"\u5927\u5e86","N":"46.36","E":"125.01","firststr":"D"},{"city":"\u5927\u540c","N":"40.06","E":"113.17","firststr":"D"},{"city":"\u5f53\u9633","N":"30.5","E":"111.47","firststr":"D"},{"city":"\u4e39\u6c5f\u53e3","N":"32.33","E":"108.3","firststr":"D"},{"city":"\u5927\u51b6","N":"30.06","E":"114.58","firststr":"D"}]},"E":{"key":"E","item":[{"city":"\u5ce8\u7709\u5c71","N":"29.36","E":"103.29","firststr":"E"},{"city":"\u6069\u5e73","N":"22.12","E":"112.19","firststr":"E"},{"city":"\u4e8c\u8fde\u6d69\u7279","N":"43.38","E":"111.58","firststr":"E"},{"city":"\u989d\u5c14\u53e4\u7eb3","N":"50.13","E":"120.11","firststr":"E"},{"city":"\u6069\u65bd","N":"30.16","E":"109.29","firststr":"E"},{"city":"\u9102\u5dde","N":"30.23","E":"114.52","firststr":"E"}]},"F":{"key":"F","item":[{"city":"\u961c\u9633","N":"32.54","E":"115.48","firststr":"F"},{"city":"\u6daa\u9675","N":"29.42","E":"107.22","firststr":"F"},{"city":"\u798f\u5dde","N":"26.05","E":"119.18","firststr":"F"},{"city":"\u798f\u5b89","N":"27.06","E":"119.39","firststr":"F"},{"city":"\u798f\u6e05","N":"25.42","E":"119.23","firststr":"F"},{"city":"\u961c\u5eb7","N":"44.09","E":"87.58","firststr":"F"},{"city":"\u4f5b\u5c71\u5e02","N":"23.02","E":"113.06","firststr":"F"},{"city":"\u5949\u5316","N":"29.39","E":"121.24","firststr":"F"},{"city":"\u5bcc\u9633","N":"30.03","E":"119.57","firststr":"F"},{"city":"\u756a\u79ba","N":"22.57","E":"113.22","firststr":"F"},{"city":"\u9632\u57ce\u6e2f","N":"21.37","E":"108.2","firststr":"F"},{"city":"\u4e30\u57ce","N":"28.12","E":"115.48","firststr":"F"},{"city":"\u51e4\u57ce","N":"40.28","E":"124.02","firststr":"F"},{"city":"\u629a\u987a","N":"41.51","E":"123.54","firststr":"F"},{"city":"\u961c\u65b0","N":"42.01","E":"121.39","firststr":"F"},{"city":"\u4e30\u5357","N":"39.34","E":"118.06","firststr":"F"},{"city":"\u4e30\u9547","N":"40.27","E":"113.09","firststr":"F"},{"city":"\u80a5\u57ce","N":"36.14","E":"116.46","firststr":"F"},{"city":"\u5bcc\u9526","N":"47.15","E":"132.02","firststr":"F"}]},"G":{"key":"G","item":[{"city":"\u8d35\u6c60","N":"30.39","E":"117.28","firststr":"G"},{"city":"\u5e7f\u6c49","N":"30.58","E":"104.15","firststr":"G"},{"city":"\u5e7f\u5143","N":"32.28","E":"105.51","firststr":"G"},{"city":"\u516c\u4e3b\u5cad","N":"43.31","E":"124.49","firststr":"G"},{"city":"\u5e7f\u5dde\u5e02","N":"23.08","E":"113.14","firststr":"G"},{"city":"\u9ad8\u660e","N":"22.53","E":"112.5","firststr":"G"},{"city":"\u4e2a\u65e7","N":"23.21","E":"103.09","firststr":"G"},{"city":"\u9ad8\u8981","N":"23.02","E":"112.26","firststr":"G"},{"city":"\u9ad8\u5dde","N":"21.54","E":"110.5","firststr":"G"},{"city":"\u9ad8\u90ae","N":"32.47","E":"119.27","firststr":"G"},{"city":"\u8862\u5dde","N":"28.58","E":"118.52","firststr":"G"},{"city":"\u8d35\u6e2f","N":"23.06","E":"109.36","firststr":"G"},{"city":"\u8d63\u5dde","N":"28.52","E":"114.56","firststr":"G"},{"city":"\u6842\u6797","N":"25.17","E":"110.17","firststr":"G"},{"city":"\u9ad8\u5b89","N":"28.25","E":"115.22","firststr":"G"},{"city":"\u6842\u5e73","N":"23.22","E":"110.04","firststr":"G"},{"city":"\u8d35\u9633","N":"26.35","E":"106.42","firststr":"G"},{"city":"\u76d6\u5dde","N":"40.24","E":"122.21","firststr":"G"},{"city":"\u9ad8\u7891\u5e97","N":"39.2","E":"115.51","firststr":"G"},{"city":"\u84bf\u57ce","N":"38.02","E":"114.5","firststr":"G"},{"city":"\u6839\u6cb3","N":"50.48","E":"121.29","firststr":"G"},{"city":"\u5de9\u4e49","N":"34.46","E":"112.58","firststr":"G"},{"city":"\u683c\u5c14\u6728","N":"36.26","E":"94.55","firststr":"G"},{"city":"\u9ad8\u5bc6","N":"36.22","E":"119.44","firststr":"G"},{"city":"\u9ad8\u5e73","N":"35.48","E":"112.55","firststr":"G"},{"city":"\u53e4\u4ea4","N":"37.54","E":"112.09","firststr":"G"},{"city":"\u5e7f\u6c34","N":"31.37","E":"113.48","firststr":"G"}]},"H":{"key":"H","item":[{"city":"\u534e\u9634","N":"34.34","E":"110.05","firststr":"H"},{"city":"\u5408\u80a5","N":"31.52","E":"117.17","firststr":"H"},{"city":"\u4eb3\u5dde","N":"33.52","E":"115.47","firststr":"H"},{"city":"\u6dee\u5317","N":"33.57","E":"116.47","firststr":"H"},{"city":"\u6dee\u5357","N":"32.37","E":"116.58","firststr":"H"},{"city":"\u9ec4\u5c71","N":"29.43","E":"118.18","firststr":"H"},{"city":"\u534e\u84e5","N":"30.26","E":"106.44","firststr":"H"},{"city":"\u8861\u9633","N":"26.53","E":"112.37","firststr":"H"},{"city":"\u6d2a\u6c5f","N":"27.07","E":"109.59","firststr":"H"},{"city":"\u6000\u5316","N":"27.33","E":"109.58","firststr":"H"},{"city":"\u54c8\u5bc6","N":"42.5","E":"93.28","firststr":"H"},{"city":"\u548c\u7530","N":"37.09","E":"79.55","firststr":"H"},{"city":"\u548c\u9f99","N":"42.32","E":"129","firststr":"H"},{"city":"\u6866\u7538","N":"42.58","E":"126.44","firststr":"H"},{"city":"\u73f2\u6625","N":"42.52","E":"130.22","firststr":"H"},{"city":"\u9e64\u5c71","N":"22.46","E":"112.57","firststr":"H"},{"city":"\u6cb3\u6e90","N":"23.43","E":"114.41","firststr":"H"},{"city":"\u82b1\u90fd","N":"23.23","E":"113.12","firststr":"H"},{"city":"\u5316\u5dde","N":"21.39","E":"110.37","firststr":"H"},{"city":"\u60e0\u9633","N":"22.48","E":"114.28","firststr":"H"},{"city":"\u60e0\u5dde","N":"23.05","E":"114.22","firststr":"H"},{"city":"\u676d\u5dde\u5e02","N":"30.16","E":"120.1","firststr":"H"},{"city":"\u6d77\u95e8","N":"31.53","E":"121.09","firststr":"H"},{"city":"\u6dee\u5b89","N":"33.3","E":"119.09","firststr":"H"},{"city":"\u6dee\u9634","N":"33.36","E":"119.02","firststr":"H"},{"city":"\u6d77\u5b81","N":"30.32","E":"120.42","firststr":"H"},{"city":"\u6e56\u5dde","N":"30.52","E":"120.06","firststr":"H"},{"city":"\u5408\u5ddd\u5e02","N":"30.02","E":"106.15","firststr":"H"},{"city":"\u6cb3\u6c60","N":"24.42","E":"108.03","firststr":"H"},{"city":"\u5408\u5c71","N":"23.47","E":"108.52","firststr":"H"},{"city":"\u6d77\u53e3","N":"20.02","E":"110.2","firststr":"H"},{"city":"\u6d77\u57ce","N":"40.51","E":"122.43","firststr":"H"},{"city":"\u846b\u82a6\u5c9b","N":"40.45","E":"120.51","firststr":"H"},{"city":"\u90af\u90f8","N":"36.36","E":"114.28","firststr":"H"},{"city":"\u6cb3\u95f4","N":"38.26","E":"116.05","firststr":"H"},{"city":"\u8861\u6c34","N":"37.44","E":"115.42","firststr":"H"},{"city":"\u9ec4\u9a85","N":"38.21","E":"117.21","firststr":"H"},{"city":"\u547c\u548c\u6d69\u7279","N":"40.48","E":"111.41","firststr":"H"},{"city":"\u6d77\u62c9\u5c14","N":"49.12","E":"119.39","firststr":"H"},{"city":"\u970d\u6797\u90ed\u52d2","N":"45.32","E":"119.38","firststr":"H"},{"city":"\u9e64\u58c1","N":"35.54","E":"114.11","firststr":"H"},{"city":"\u8f89\u53bf","N":"35.27","E":"113.47","firststr":"H"},{"city":"\u83cf\u6cfd","N":"35.14","E":"115.26","firststr":"H"},{"city":"\u54c8\u5c14\u6ee8","N":"45.44","E":"126.36","firststr":"H"},{"city":"\u6d77\u6797","N":"44.35","E":"129.21","firststr":"H"},{"city":"\u6d77\u4f26","N":"47.28","E":"126.57","firststr":"H"},{"city":"\u9e64\u5c97","N":"47.2","E":"130.16","firststr":"H"},{"city":"\u9ed1\u6cb3","N":"50.14","E":"127.29","firststr":"H"},{"city":"\u6cb3\u6d25","N":"35.35","E":"110.41","firststr":"H"},{"city":"\u4faf\u9a6c","N":"35.37","E":"111.21","firststr":"H"},{"city":"\u970d\u5dde","N":"36.34","E":"111.42","firststr":"H"},{"city":"\u6d2a\u6e56","N":"29.48","E":"113.27","firststr":"H"},{"city":"\u9ec4\u77f3","N":"30.12","E":"115.06","firststr":"H"},{"city":"\u9ec4\u5dde","N":"30.27","E":"114.52","firststr":"H"},{"city":"\u97e9\u57ce","N":"35.28","E":"110.27","firststr":"H"},{"city":"\u6c49\u4e2d","N":"33.04","E":"107.01","firststr":"H"}]},"J":{"key":"J","item":[{"city":"\u754c\u9996","N":"33.15","E":"115.21","firststr":"J"},{"city":"\u7b80\u9633","N":"30.24","E":"104.32","firststr":"J"},{"city":"\u6c5f\u6cb9","N":"31.48","E":"104.42","firststr":"J"},{"city":"\u6d25\u5e02","N":"29.38","E":"111.52","firststr":"J"},{"city":"\u5409\u9996","N":"28.18","E":"109.43","firststr":"J"},{"city":"\u5efa\u74ef","N":"27.03","E":"118.2","firststr":"J"},{"city":"\u5efa\u9633","N":"27.21","E":"118.07","firststr":"J"},{"city":"\u664b\u6c5f","N":"24.49","E":"118.35","firststr":"J"},{"city":"\u5609\u5cea\u5173","N":"39.48","E":"98.14","firststr":"J"},{"city":"\u91d1\u660c","N":"38.28","E":"102.1","firststr":"J"},{"city":"\u9152\u6cc9","N":"39.44","E":"98.31","firststr":"J"},{"city":"\u96c6\u5b89","N":"41.08","E":"126.11","firststr":"J"},{"city":"\u86df\u6cb3","N":"43.42","E":"127.21","firststr":"J"},{"city":"\u5409\u6797","N":"43.52","E":"126.33","firststr":"J"},{"city":"\u4e5d\u53f0","N":"44.09","E":"125.51","firststr":"J"},{"city":"\u666f\u6d2a","N":"22.01","E":"100.48","firststr":"J"},{"city":"\u6c5f\u95e8","N":"22.35","E":"113.04","firststr":"J"},{"city":"\u63ed\u9633","N":"22.32","E":"116.21","firststr":"J"},{"city":"\u6c5f\u90fd","N":"32.26","E":"119.32","firststr":"J"},{"city":"\u59dc\u5830","N":"32.34","E":"120.08","firststr":"J"},{"city":"\u6c5f\u9634","N":"31.54","E":"120.17","firststr":"J"},{"city":"\u5efa\u5fb7","N":"29.29","E":"119.16","firststr":"J"},{"city":"\u9756\u6c5f","N":"32.02","E":"120.17","firststr":"J"},{"city":"\u6c5f\u5c71","N":"28.45","E":"118.37","firststr":"J"},{"city":"\u91d1\u575b","N":"31.46","E":"119.33","firststr":"J"},{"city":"\u5609\u5174","N":"30.46","E":"120.45","firststr":"J"},{"city":"\u91d1\u534e","N":"29.07","E":"119.39","firststr":"J"},{"city":"\u6c5f\u6d25\u5e02","N":"29.18","E":"106.16","firststr":"J"},{"city":"\u5409\u5b89","N":"27.07","E":"114.58","firststr":"J"},{"city":"\u666f\u5fb7\u9547","N":"29.17","E":"117.13","firststr":"J"},{"city":"\u4e95\u5188\u5c71","N":"26.34","E":"114.1","firststr":"J"},{"city":"\u4e5d\u6c5f","N":"29.43","E":"115.58","firststr":"J"},{"city":"\u9526\u5dde","N":"41.07","E":"121.09","firststr":"J"},{"city":"\u664b\u5dde","N":"38.02","E":"115.02","firststr":"J"},{"city":"\u5180\u5dde","N":"37.34","E":"115.33","firststr":"J"},{"city":"\u96c6\u5b81","N":"41.02","E":"113.06","firststr":"J"},{"city":"\u7126\u4f5c","N":"35.14","E":"113.12","firststr":"J"},{"city":"\u6d4e\u6e90","N":"35.04","E":"112.35","firststr":"J"},{"city":"\u6d4e\u5357","N":"36.4","E":"117","firststr":"J"},{"city":"\u80f6\u5357","N":"35.53","E":"119.58","firststr":"J"},{"city":"\u80f6\u5dde","N":"36.17","E":"120","firststr":"J"},{"city":"\u5373\u58a8","N":"36.22","E":"120.28","firststr":"J"},{"city":"\u6d4e\u5b81","N":"35.23","E":"116.33","firststr":"J"},{"city":"\u4f73\u6728\u65af","N":"46.47","E":"130.22","firststr":"J"},{"city":"\u9e21\u897f","N":"45.17","E":"130.57","firststr":"J"},{"city":"\u4ecb\u4f11","N":"37.02","E":"111.55","firststr":"J"},{"city":"\u664b\u57ce","N":"35.3","E":"112.51","firststr":"J"},{"city":"\u8346\u95e8","N":"31.02","E":"112.12","firststr":"J"},{"city":"\u8346\u6c99","N":"30.18","E":"112.16","firststr":"J"}]},"K":{"key":"K","item":[{"city":"\u514b\u62c9\u739b\u4f9d","N":"45.36","E":"84.51","firststr":"K"},{"city":"\u5580\u4ec0","N":"39.3","E":"75.59","firststr":"K"},{"city":"\u5e93\u5c14\u52d2","N":"41.46","E":"86.07","firststr":"K"},{"city":"\u594e\u5c6f","N":"44.27","E":"84.56","firststr":"K"},{"city":"\u6606\u660e","N":"25.04","E":"102.42","firststr":"K"},{"city":"\u5f00\u8fdc","N":"23.43","E":"103.13","firststr":"K"},{"city":"\u5f00\u5e73","N":"22.22","E":"112.4","firststr":"K"},{"city":"\u6606\u5c71","N":"31.23","E":"120.57","firststr":"K"},{"city":"\u51ef\u91cc","N":"26.35","E":"107.58","firststr":"K"},{"city":"\u5f00\u539f","N":"42.32","E":"124.02","firststr":"K"},{"city":"\u5ed3\u574a","N":"39.31","E":"116.42","firststr":"K"},{"city":"\u5f00\u5c01","N":"34.47","E":"114.21","firststr":"K"}]},"L":{"key":"L","item":[{"city":"\u516d\u5b89","N":"31.44","E":"116.28","firststr":"L"},{"city":"\u9606\u4e2d","N":"31.36","E":"105.58","firststr":"L"},{"city":"\u4e50\u5c71","N":"29.36","E":"103.44","firststr":"L"},{"city":"\u6cf8\u5dde","N":"28.54","E":"105.24","firststr":"L"},{"city":"\u51b7\u6c34\u6c5f","N":"27.42","E":"111.26","firststr":"L"},{"city":"\u51b7\u6c34\u6ee9","N":"26.26","E":"111.35","firststr":"L"},{"city":"\u6d9f\u6e90","N":"27.41","E":"111.41","firststr":"L"},{"city":"\u91b4\u9675","N":"27.4","E":"113.3","firststr":"L"},{"city":"\u9f99\u6d77","N":"24.26","E":"117.48","firststr":"L"},{"city":"\u4e34\u6e58","N":"29.29","E":"113.27","firststr":"L"},{"city":"\u9f99\u5ca9","N":"25.06","E":"117.01","firststr":"L"},{"city":"\u6d4f\u9633","N":"28.09","E":"113.37","firststr":"L"},{"city":"\u5a04\u5e95","N":"27.44","E":"111.59","firststr":"L"},{"city":"\u62c9\u8428","N":"29.39","E":"91.08","firststr":"L"},{"city":"\u5170\u5dde","N":"36.04","E":"103.51","firststr":"L"},{"city":"\u4e34\u590f","N":"35.37","E":"103.12","firststr":"L"},{"city":"\u8fbd\u6e90","N":"42.54","E":"125.09","firststr":"L"},{"city":"\u4e34\u6c5f","N":"41.49","E":"126.53","firststr":"L"},{"city":"\u9f99\u4e95","N":"42.46","E":"129.26","firststr":"L"},{"city":"\u4e50\u660c","N":"25.09","E":"113.21","firststr":"L"},{"city":"\u96f7\u5dde","N":"20.54","E":"110.04","firststr":"L"},{"city":"\u5ec9\u6c5f","N":"21.37","E":"110.17","firststr":"L"},{"city":"\u8fde\u5dde","N":"24.48","E":"112.23","firststr":"L"},{"city":"\u7f57\u5b9a","N":"22.46","E":"111.33","firststr":"L"},{"city":"\u8fde\u53bb\u6e2f","N":"34.36","E":"119.1","firststr":"L"},{"city":"\u5170\u6eaa","N":"29.12","E":"119.28","firststr":"L"},{"city":"\u6ea7\u9633","N":"31.26","E":"119.29","firststr":"L"},{"city":"\u4e34\u6d77","N":"28.51","E":"121.08","firststr":"L"},{"city":"\u4e3d\u6c34","N":"28.27","E":"119.54","firststr":"L"},{"city":"\u9f99\u6cc9","N":"28.04","E":"119.08","firststr":"L"},{"city":"\u4e50\u6e05","N":"28.08","E":"120.58","firststr":"L"},{"city":"\u67f3\u5dde","N":"23.19","E":"109.24","firststr":"L"},{"city":"\u8d41\u7965","N":"22.07","E":"106.44","firststr":"L"},{"city":"\u4e50\u5e73","N":"28.58","E":"117.08","firststr":"L"},{"city":"\u4e34\u5ddd","N":"27.59","E":"116.21","firststr":"L"},{"city":"\u516d\u76d8\u6c34","N":"26.35","E":"104.5","firststr":"L"},{"city":"\u8fbd\u9633","N":"41.16","E":"123.12","firststr":"L"},{"city":"\u51cc\u6d77","N":"41.1","E":"121.21","firststr":"L"},{"city":"\u51cc\u6e90","N":"41.14","E":"119.22","firststr":"L"},{"city":"\u9e7f\u6cc9","N":"38.04","E":"114.19","firststr":"L"},{"city":"\u4e34\u6cb3","N":"40.46","E":"107.22","firststr":"L"},{"city":"\u7075\u5b9d","N":"34.31","E":"110.52","firststr":"L"},{"city":"\u6797\u5dde","N":"36.03","E":"113.49","firststr":"L"},{"city":"\u6f2f\u6cb3","N":"33.33","E":"114.02","firststr":"L"},{"city":"\u6d1b\u9633","N":"34.41","E":"112.27","firststr":"L"},{"city":"\u83b1\u829c","N":"36.12","E":"117.4","firststr":"L"},{"city":"\u83b1\u897f","N":"36.52","E":"120.31","firststr":"L"},{"city":"\u83b1\u9633","N":"36.58","E":"120.42","firststr":"L"},{"city":"\u83b1\u5dde","N":"37.1","E":"119.57","firststr":"L"},{"city":"\u4e50\u9675","N":"37.44","E":"117.12","firststr":"L"},{"city":"\u804a\u57ce","N":"36.26","E":"115.57","firststr":"L"},{"city":"\u4e34\u6e05","N":"36.51","E":"115.42","firststr":"L"},{"city":"\u4e34\u6c82","N":"35.03","E":"118.2","firststr":"L"},{"city":"\u9f99\u53e3","N":"37.39","E":"120.21","firststr":"L"},{"city":"\u4e34\u6c7e","N":"36.05","E":"111.31","firststr":"L"},{"city":"\u6f5e\u57ce","N":"36.21","E":"113.14","firststr":"L"},{"city":"\u8001\u6cb3\u53e3","N":"32.23","E":"111.4","firststr":"L"},{"city":"\u5229\u5ddd","N":"30.18","E":"108.56","firststr":"L"}]},"M":{"key":"M","item":[{"city":"\u9a6c\u978d\u5c71","N":"31.43","E":"118.28","firststr":"M"},{"city":"\u660e\u5149","N":"32.47","E":"117.58","firststr":"M"},{"city":"\u8012\u9633","N":"26.24","E":"112.51","firststr":"M"},{"city":"\u7ef5\u9633","N":"31.3","E":"104.42","firststr":"M"},{"city":"\u909b\u5d03","N":"30.26","E":"103.28","firststr":"M"},{"city":"\u6c68\u7f57","N":"28.49","E":"113.03","firststr":"M"},{"city":"\u6885\u6cb3\u53e3","N":"42.32","E":"125.4","firststr":"M"},{"city":"\u8302\u540d","N":"21.4","E":"110.53","firststr":"M"},{"city":"\u6885\u5dde","N":"24.19","E":"116.07","firststr":"M"},{"city":"\u6ee1\u6d32\u91cc","N":"49.35","E":"117.23","firststr":"M"},{"city":"\u5bc6\u5c71","N":"45.32","E":"131.5","firststr":"M"},{"city":"\u7261\u4e39\u6c5f","N":"44.35","E":"129.36","firststr":"M"},{"city":"\u9ebb\u57ce","N":"31.1","E":"115.01","firststr":"M"}]},"N":{"key":"N","item":[{"city":"\u5357\u5145","N":"30.49","E":"106.04","firststr":"N"},{"city":"\u5185\u6c5f","N":"29.36","E":"105.02","firststr":"N"},{"city":"\u5357\u5b89","N":"24.57","E":"118.23","firststr":"N"},{"city":"\u5357\u5e73","N":"26.38","E":"118.1","firststr":"N"},{"city":"\u5b81\u5fb7","N":"26.39","E":"119.31","firststr":"N"},{"city":"\u5357\u4eac\u5e02","N":"32.03","E":"118.46","firststr":"N"},{"city":"\u5357\u6d77","N":"23.01","E":"113.09","firststr":"N"},{"city":"\u5357\u901a","N":"32.01","E":"120.51","firststr":"N"},{"city":"\u5b81\u6ce2","N":"29.52","E":"121.33","firststr":"N"},{"city":"\u5357\u5b81","N":"22.48","E":"108.19","firststr":"N"},{"city":"\u5357\u660c","N":"28.4","E":"115.55","firststr":"N"},{"city":"\u5357\u5ddd\u5e02","N":"29.1","E":"107.05","firststr":"N"},{"city":"\u5357\u5bab","N":"37.22","E":"115.23","firststr":"N"},{"city":"\u5357\u9633","N":"33","E":"112.32","firststr":"N"},{"city":"\u8bb7\u6cb3","N":"48.29","E":"124.51","firststr":"N"},{"city":"\u5b81\u5b89","N":"44.21","E":"129.28","firststr":"N"}]},"P":{"key":"P","item":[{"city":"\u6d66\u573b","N":"29.42","E":"113.51","firststr":"P"},{"city":"\u6500\u679d\u82b1","N":"26.34","E":"101.43","firststr":"P"},{"city":"\u5f6d\u5dde","N":"30.59","E":"103.57","firststr":"P"},{"city":"\u8386\u7530","N":"24.26","E":"119.01","firststr":"P"},{"city":"\u5e73\u51c9","N":"35.32","E":"106.4","firststr":"P"},{"city":"\u666e\u5b81","N":"23.18","E":"116.1","firststr":"P"},{"city":"\u90b3\u5dde","N":"34.19","E":"117.59","firststr":"P"},{"city":"\u5e73\u6e56","N":"30.42","E":"121.01","firststr":"P"},{"city":"\u840d\u4e61","N":"27.37","E":"113.5","firststr":"P"},{"city":"\u76d8\u9526","N":"41.07","E":"122.03","firststr":"P"},{"city":"\u666e\u5170\u5e97","N":"39.23","E":"121.58","firststr":"P"},{"city":"\u5e73\u9876\u5c71","N":"33.44","E":"113.17","firststr":"P"},{"city":"\u6fee\u9633","N":"35.44","E":"115.01","firststr":"P"},{"city":"\u84ec\u83b1","N":"37.48","E":"120.45","firststr":"P"},{"city":"\u5e73\u5ea6","N":"36.47","E":"119.58","firststr":"P"}]},"Q":{"key":"Q","item":[{"city":"\u6f5c\u6c5f","N":"30.26","E":"112.53","firststr":"Q"},{"city":"\u6cc9\u5dde","N":"24.56","E":"118.36","firststr":"Q"},{"city":"\u66f2\u9756","N":"25.3","E":"103.48","firststr":"Q"},{"city":"\u6e05\u8fdc","N":"23.42","E":"113.01","firststr":"Q"},{"city":"\u542f\u4e50","N":"31.48","E":"121.39","firststr":"Q"},{"city":"\u94a6\u5dde","N":"21.57","E":"108.37","firststr":"Q"},{"city":"\u6e05\u9547","N":"26.33","E":"106.27","firststr":"Q"},{"city":"\u743c\u6d77","N":"19.14","E":"110.28","firststr":"Q"},{"city":"\u743c\u5c71","N":"19.59","E":"110.21","firststr":"Q"},{"city":"\u79e6\u7687\u5c9b","N":"39.55","E":"119.35","firststr":"Q"},{"city":"\u9752\u94dc\u5ce1","N":"37.56","E":"105.59","firststr":"Q"},{"city":"\u6c81\u9633","N":"35.05","E":"112.57","firststr":"Q"},{"city":"\u9752\u5c9b","N":"36.03","E":"120.18","firststr":"Q"},{"city":"\u9752\u5dde","N":"36.42","E":"118.28","firststr":"Q"},{"city":"\u66f2\u961c","N":"35.36","E":"116.58","firststr":"Q"},{"city":"\u9f50\u9f50\u54c8\u5c14","N":"47.2","E":"123.57","firststr":"Q"},{"city":"\u4e03\u53f0\u6cb3","N":"45.48","E":"130.49","firststr":"Q"}]},"R":{"key":"R","item":[{"city":"\u6c85\u6c5f","N":"28.5","E":"112.22","firststr":"R"},{"city":"\u65e5\u5580\u5219","N":"29.16","E":"88.51","firststr":"R"},{"city":"\u745e\u4e3d","N":"24","E":"97.5","firststr":"R"},{"city":"\u5982\u768b","N":"32.23","E":"120.33","firststr":"R"},{"city":"\u745e\u5b89","N":"27.48","E":"120.38","firststr":"R"},{"city":"\u745e\u660c","N":"29.4","E":"115.38","firststr":"R"},{"city":"\u745e\u91d1","N":"25.53","E":"116.01","firststr":"R"},{"city":"\u4efb\u4e18","N":"38.42","E":"116.07","firststr":"R"},{"city":"\u6c5d\u5dde","N":"34.09","E":"112.5","firststr":"R"},{"city":"\u65e5\u7167","N":"35.23","E":"119.32","firststr":"R"},{"city":"\u8363\u6210","N":"37.1","E":"122.25","firststr":"R"},{"city":"\u4e73\u5c71","N":"36.54","E":"121.31","firststr":"R"}]},"S":{"key":"S","item":[{"city":"\u5546\u5dde","N":"33.52","E":"109.57","firststr":"S"},{"city":"\u77f3\u9996","N":"29.43","E":"112.24","firststr":"S"},{"city":"\u5341\u5830","N":"32.4","E":"110.47","firststr":"S"},{"city":"\u968f\u5dde","N":"31.42","E":"113.22","firststr":"S"},{"city":"\u4e0a\u6d77\u5e02","N":"31.14","E":"121.29","firststr":"S"},{"city":"\u5bbf\u5dde","N":"33.38","E":"116.58","firststr":"S"},{"city":"\u9042\u5b81","N":"30.31","E":"105.33","firststr":"S"},{"city":"\u97f6\u5c71","N":"27.54","E":"112.29","firststr":"S"},{"city":"\u90b5\u9633","N":"27.14","E":"111.28","firststr":"S"},{"city":"\u4e09\u660e","N":"26.13","E":"117.36","firststr":"S"},{"city":"\u90b5\u6b66","N":"27.2","E":"117.29","firststr":"S"},{"city":"\u77f3\u72ee","N":"24.44","E":"118.38","firststr":"S"},{"city":"\u77f3\u6cb3\u5b50","N":"44.18","E":"86","firststr":"S"},{"city":"\u8212\u5170","N":"44.24","E":"126.57","firststr":"S"},{"city":"\u56db\u5e73","N":"43.1","E":"124.22","firststr":"S"},{"city":"\u677e\u539f","N":"45.11","E":"124.49","firststr":"S"},{"city":"\u601d\u8305","N":"22.48","E":"100.58","firststr":"S"},{"city":"\u4e09\u6c34","N":"23.1","E":"112.52","firststr":"S"},{"city":"\u6c55\u5934","N":"23.22","E":"116.41","firststr":"S"},{"city":"\u6c55\u5c3e","N":"22.47","E":"115.21","firststr":"S"},{"city":"\u97f6\u5173","N":"24.48","E":"113.37","firststr":"S"},{"city":"\u6df1\u5733\u5e02","N":"22.33","E":"114.07","firststr":"S"},{"city":"\u5bbf\u8fc1","N":"33.58","E":"118.18","firststr":"S"},{"city":"\u987a\u5fb7","N":"22.5","E":"113.15","firststr":"S"},{"city":"\u82cf\u5dde","N":"31.19","E":"120.37","firststr":"S"},{"city":"\u56db\u4f1a","N":"23.21","E":"112.41","firststr":"S"},{"city":"\u4e0a\u865e","N":"30.01","E":"120.52","firststr":"S"},{"city":"\u7ecd\u5174","N":"30","E":"120.34","firststr":"S"},{"city":"\u4e0a\u9976","N":"25.27","E":"117.58","firststr":"S"},{"city":"\u6c88\u9633","N":"41.48","E":"123.25","firststr":"S"},{"city":"\u4e09\u4e9a","N":"18.14","E":"109.31","firststr":"S"},{"city":"\u77f3\u5bb6\u5e84","N":"38.02","E":"114.3","firststr":"S"},{"city":"\u4e09\u6cb3","N":"39.58","E":"117.04","firststr":"S"},{"city":"\u6c99\u6cb3","N":"36.51","E":"114.3","firststr":"S"},{"city":"\u6df1\u5dde","N":"38.01","E":"115.32","firststr":"S"},{"city":"\u77f3\u5634\u5c71","N":"39.02","E":"106.22","firststr":"S"},{"city":"\u4e09\u95e8\u5ce1","N":"34.47","E":"111.12","firststr":"S"},{"city":"\u5546\u4e18","N":"34.26","E":"115.38","firststr":"S"},{"city":"\u5bff\u5149","N":"36.53","E":"118.44","firststr":"S"},{"city":"\u53cc\u57ce","N":"45.22","E":"126.15","firststr":"S"},{"city":"\u5c1a\u5fd7","N":"45.14","E":"127.55","firststr":"S"},{"city":"\u53cc\u9e2d\u5c71","N":"46.38","E":"131.11","firststr":"S"},{"city":"\u7ee5\u82ac\u6cb3","N":"44.25","E":"131.11","firststr":"S"},{"city":"\u7ee5\u5316","N":"46.38","E":"126.59","firststr":"S"},{"city":"\u6714\u5dde","N":"39.19","E":"112.26","firststr":"S"}]},"T":{"key":"T","item":[{"city":"\u94dc\u5ddd","N":"35.06","E":"109.07","firststr":"T"},{"city":"\u5929\u95e8","N":"30.6","E":"113.1","firststr":"T"},{"city":"\u5929\u957f","N":"32.41","E":"118.59","firststr":"T"},{"city":"\u94dc\u9675","N":"30.56","E":"117.48","firststr":"T"},{"city":"\u53f0\u5317\u5e02","N":"25.03","E":"121.3","firststr":"T"},{"city":"\u5929\u6d25\u5e02","N":"39.02","E":"117.12","firststr":"T"},{"city":"\u5929\u6c34","N":"34.37","E":"105.42","firststr":"T"},{"city":"\u5854\u57ce","N":"46.46","E":"82.59","firststr":"T"},{"city":"\u5410\u9c81\u756a","N":"42.54","E":"89.11","firststr":"T"},{"city":"\u901a\u5316","N":"41.43","E":"125.56","firststr":"T"},{"city":"\u56fe\u4eec","N":"42.57","E":"129.51","firststr":"T"},{"city":"\u592a\u4ed3","N":"31.27","E":"121.06","firststr":"T"},{"city":"\u53f0\u5c71","N":"22.15","E":"112.48","firststr":"T"},{"city":"\u6cf0\u5174","N":"32.1","E":"120.01","firststr":"T"},{"city":"\u6cf0\u5dde","N":"32.3","E":"119.54","firststr":"T"},{"city":"\u53f0\u5dde","N":"28.41","E":"121.27","firststr":"T"},{"city":"\u901a\u5dde","N":"32.05","E":"121.03","firststr":"T"},{"city":"\u6850\u4e61","N":"30.38","E":"120.32","firststr":"T"},{"city":"\u94dc\u4ec1","N":"27.43","E":"109.12","firststr":"T"},{"city":"\u901a\u4ec0","N":"18.46","E":"109.31","firststr":"T"},{"city":"\u94c1\u6cd5","N":"42.28","E":"123.32","firststr":"T"},{"city":"\u94c1\u5cad","N":"42.18","E":"123.51","firststr":"T"},{"city":"\u5510\u5c71","N":"39.36","E":"118.11","firststr":"T"},{"city":"\u901a\u8fbd","N":"43.37","E":"122.16","firststr":"T"},{"city":"\u6cf0\u5b89","N":"36.11","E":"117.08","firststr":"T"},{"city":"\u6ed5\u5dde","N":"35.06","E":"117.09","firststr":"T"},{"city":"\u592a\u539f","N":"37.54","E":"112.33","firststr":"T"},{"city":"\u94c1\u529b","N":"46.59","E":"128.01","firststr":"T"},{"city":"\u540c\u6c5f","N":"47.39","E":"132.3","firststr":"T"}]},"W":{"key":"W","item":[{"city":"\u6e2d\u5357","N":"34.3","E":"109.3","firststr":"W"},{"city":"\u6b66\u7a74","N":"29.51","E":"115.33","firststr":"W"},{"city":"\u829c\u6e56","N":"31.19","E":"118.22","firststr":"W"},{"city":"\u4e07\u53bf","N":"30.5","E":"108.21","firststr":"W"},{"city":"\u4e07\u6e90","N":"32.03","E":"108.03","firststr":"W"},{"city":"\u6b66\u5188","N":"26.43","E":"110.37","firststr":"W"},{"city":"\u6b66\u5937\u5c71","N":"27.46","E":"118.02","firststr":"W"},{"city":"\u4e4c\u9c81\u6728\u9f50","N":"43.45","E":"87.36","firststr":"W"},{"city":"\u6b66\u5a01","N":"37.56","E":"102.39","firststr":"W"},{"city":"\u6d2e\u5357","N":"45.2","E":"122.47","firststr":"W"},{"city":"\u7579\u753a","N":"24.06","E":"98.04","firststr":"W"},{"city":"\u5434\u5ddd","N":"21.26","E":"110.47","firststr":"W"},{"city":"\u5434\u6c5f","N":"31.1","E":"120.39","firststr":"W"},{"city":"\u6e29\u5cad","N":"28.22","E":"121.21","firststr":"W"},{"city":"\u65e0\u9521","N":"31.34","E":"120.18","firststr":"W"},{"city":"\u6e29\u5dde","N":"28.01","E":"120.39","firststr":"W"},{"city":"\u68a7\u5dde","N":"23.29","E":"111.2","firststr":"W"},{"city":"\u74e6\u623f\u5e97","N":"39.37","E":"122","firststr":"W"},{"city":"\u6b66\u5b89","N":"36.42","E":"114.11","firststr":"W"},{"city":"\u4e4c\u5170\u6d69\u7279","N":"46.03","E":"122.03","firststr":"W"},{"city":"\u4e4c\u6d77","N":"39.4","E":"106.48","firststr":"W"},{"city":"\u5434\u5fe0","N":"37.59","E":"106.11","firststr":"W"},{"city":"\u536b\u8f89","N":"35.24","E":"114.03","firststr":"W"},{"city":"\u821e\u94a2","N":"33.17","E":"113.3","firststr":"W"},{"city":"\u6f4d\u574a","N":"36.43","E":"119.06","firststr":"W"},{"city":"\u5a01\u6d77","N":"37.31","E":"122.07","firststr":"W"},{"city":"\u6587\u767b","N":"37.12","E":"122.03","firststr":"W"},{"city":"\u4e94\u5e38","N":"44.55","E":"127.11","firststr":"W"},{"city":"\u4e94\u5927\u8fde\u6c60","N":"48.38","E":"126.07","firststr":"W"},{"city":"\u6b66\u6c49\u5e02","N":"30.35","E":"114.17","firststr":"W"}]},"X":{"key":"X","item":[{"city":"\u54b8\u9633","N":"34.2","E":"108.43","firststr":"X"},{"city":"\u5174\u5e73","N":"34.18","E":"108.29","firststr":"X"},{"city":"\u8944\u6a0a","N":"32.02","E":"112.08","firststr":"X"},{"city":"\u54b8\u5b81","N":"29.53","E":"114.17","firststr":"X"},{"city":"\u4ed9\u6843","N":"30.22","E":"113.27","firststr":"X"},{"city":"\u5b5d\u611f","N":"30.56","E":"113.54","firststr":"X"},{"city":"\u5ba3\u5dde","N":"30.57","E":"118.44","firststr":"X"},{"city":"\u897f\u660c","N":"27.54","E":"102.16","firststr":"X"},{"city":"\u6e58\u6f6d","N":"27.52","E":"112.53","firststr":"X"},{"city":"\u6e58\u4e61","N":"27.44","E":"112.31","firststr":"X"},{"city":"\u53a6\u95e8","N":"24.27","E":"118.06","firststr":"X"},{"city":"\u9999\u6e2f\u5e02","N":"21.23","E":"115.12","firststr":"X"},{"city":"\u897f\u5cf0","N":"35.45","E":"107.4","firststr":"X"},{"city":"\u5ba3\u5a01","N":"26.13","E":"104.06","firststr":"X"},{"city":"\u65b0\u4f1a","N":"22.32","E":"113.01","firststr":"X"},{"city":"\u5174\u5b81","N":"24.09","E":"115.43","firststr":"X"},{"city":"\u5174\u5316","N":"32.56","E":"119.5","firststr":"X"},{"city":"\u8427\u5c71","N":"30.09","E":"120.16","firststr":"X"},{"city":"\u65b0\u6c82","N":"34.22","E":"118.2","firststr":"X"},{"city":"\u5f90\u5dde","N":"34.15","E":"117.11","firststr":"X"},{"city":"\u65b0\u4f59","N":"27.48","E":"114.56","firststr":"X"},{"city":"\u5174\u4e49","N":"25.05","E":"104.53","firststr":"X"},{"city":"\u5174\u57ce","N":"40.37","E":"120.41","firststr":"X"},{"city":"\u65b0\u6c11","N":"41.59","E":"122.49","firststr":"X"},{"city":"\u90a2\u53f0","N":"37.04","E":"114.3","firststr":"X"},{"city":"\u8f9b\u96c6","N":"37.54","E":"115.12","firststr":"X"},{"city":"\u65b0\u4e50","N":"38.2","E":"114.41","firststr":"X"},{"city":"\u9521\u6797\u6d69\u7279","N":"43.57","E":"116.03","firststr":"X"},{"city":"\u897f\u5b81","N":"36.38","E":"101.48","firststr":"X"},{"city":"\u9879\u57ce","N":"33.26","E":"114.54","firststr":"X"},{"city":"\u65b0\u5bc6","N":"34.31","E":"113.22","firststr":"X"},{"city":"\u65b0\u4e61","N":"35.18","E":"113.52","firststr":"X"},{"city":"\u4fe1\u9633","N":"32.07","E":"114.04","firststr":"X"},{"city":"\u65b0\u90d1","N":"34.24","E":"113.43","firststr":"X"},{"city":"\u8bb8\u660c","N":"34.01","E":"113.49","firststr":"X"},{"city":"\u65b0\u6cf0","N":"35.54","E":"117.45","firststr":"X"},{"city":"\u5b5d\u4e49","N":"37.08","E":"111.48","firststr":"X"},{"city":"\u5ffb\u5dde","N":"38.24","E":"112.43","firststr":"X"},{"city":"\u897f\u5b89\u5e02","N":"34.17","E":"108.57","firststr":"X"}]},"Y":{"key":"Y","item":[{"city":"\u5ef6\u5b89","N":"36.35","E":"109.28","firststr":"Y"},{"city":"\u6986\u6797","N":"38.18","E":"109.47","firststr":"Y"},{"city":"\u5b9c\u660c","N":"30.42","E":"111.17","firststr":"Y"},{"city":"\u5b9c\u57ce","N":"31.42","E":"112.15","firststr":"Y"},{"city":"\u5e94\u57ce","N":"30.57","E":"113.33","firststr":"Y"},{"city":"\u96c5\u5b89","N":"29.59","E":"102.59","firststr":"Y"},{"city":"\u5b9c\u5bbe","N":"28.47","E":"104.34","firststr":"Y"},{"city":"\u76ca\u9633","N":"28.36","E":"112.2","firststr":"Y"},{"city":"\u6c38\u5dde","N":"26.13","E":"111.37","firststr":"Y"},{"city":"\u6c38\u5b89","N":"25.58","E":"117.23","firststr":"Y"},{"city":"\u5cb3\u9633","N":"29.22","E":"113.06","firststr":"Y"},{"city":"\u7389\u95e8","N":"39.49","E":"97.35","firststr":"Y"},{"city":"\u4f0a\u5b81","N":"43.55","E":"81.2","firststr":"Y"},{"city":"\u5ef6\u5409","N":"42.54","E":"129.3","firststr":"Y"},{"city":"\u6109\u6811","N":"44.49","E":"126.32","firststr":"Y"},{"city":"\u7389\u6eaa","N":"24.22","E":"102.32","firststr":"Y"},{"city":"\u9633\u6625","N":"22.1","E":"111.48","firststr":"Y"},{"city":"\u9633\u6c5f","N":"21.5","E":"111.58","firststr":"Y"},{"city":"\u82f1\u5fb7","N":"24.1","E":"113.22","firststr":"Y"},{"city":"\u4e49\u4e4c","N":"29.18","E":"120.04","firststr":"Y"},{"city":"\u4e91\u6d6e","N":"22.57","E":"112.02","firststr":"Y"},{"city":"\u76d0\u5728","N":"33.22","E":"120.08","firststr":"Y"},{"city":"\u4f59\u676d","N":"30.26","E":"120.18","firststr":"Y"},{"city":"\u626c\u4e2d","N":"32.14","E":"119.49","firststr":"Y"},{"city":"\u4f59\u59da","N":"30.02","E":"121.1","firststr":"Y"},{"city":"\u626c\u5dde","N":"32.23","E":"119.26","firststr":"Y"},{"city":"\u6c38\u5eb7","N":"29.54","E":"120.01","firststr":"Y"},{"city":"\u5b9c\u5174","N":"31.21","E":"119.49","firststr":"Y"},{"city":"\u4eea\u5f81","N":"32.16","E":"119.1","firststr":"Y"},{"city":"\u6c38\u5ddd\u5e02","N":"29.23","E":"105.53","firststr":"Y"},{"city":"\u7389\u6797","N":"22.38","E":"110.09","firststr":"Y"},{"city":"\u5b9c\u5dde","N":"24.28","E":"108.4","firststr":"Y"},{"city":"\u5b9c\u6625","N":"27.47","E":"114.23","firststr":"Y"},{"city":"\u9e70\u6f6d","N":"28.14","E":"117.03","firststr":"Y"},{"city":"\u8425\u53e3","N":"40.39","E":"122.13","firststr":"Y"},{"city":"\u7259\u514b\u77f3","N":"49.17","E":"120.4","firststr":"Y"},{"city":"\u94f6\u5ddd","N":"38.27","E":"106.16","firststr":"Y"},{"city":"\u8365\u9633","N":"34.46","E":"113.21","firststr":"Y"},{"city":"\u5043\u5e08","N":"34.43","E":"112.47","firststr":"Y"},{"city":"\u4e49\u9a6c","N":"34.43","E":"111.55","firststr":"Y"},{"city":"\u79b9\u5dde","N":"34.09","E":"113.28","firststr":"Y"},{"city":"\u70df\u53f0","N":"37.32","E":"121.24","firststr":"Y"},{"city":"\u5156\u5dde","N":"35.32","E":"116.49","firststr":"Y"},{"city":"\u79b9\u57ce","N":"36.56","E":"116.39","firststr":"Y"},{"city":"\u4f0a\u6625","N":"47.42","E":"128.56","firststr":"Y"},{"city":"\u9633\u6cc9","N":"37.51","E":"113.34","firststr":"Y"},{"city":"\u6c38\u6d4e","N":"34.52","E":"110.27","firststr":"Y"},{"city":"\u539f\u5e73","N":"38.43","E":"112.42","firststr":"Y"},{"city":"\u6986\u6b21","N":"37.41","E":"112.43","firststr":"Y"},{"city":"\u8fd0\u57ce","N":"35.02","E":"110.59","firststr":"Y"}]},"Z":{"key":"Z","item":[{"city":"\u67a3\u9633","N":"32.07","E":"112.44","firststr":"Z"},{"city":"\u679d\u57ce","N":"30.23","E":"111.27","firststr":"Z"},{"city":"\u949f\u7965","N":"31.1","E":"112.34","firststr":"Z"},{"city":"\u81ea\u8d21","N":"29.23","E":"104.46","firststr":"Z"},{"city":"\u8d44\u9633","N":"30.09","E":"104.38","firststr":"Z"},{"city":"\u6f33\u5e73","N":"25.17","E":"117.24","firststr":"Z"},{"city":"\u5f20\u5bb6\u754c","N":"29.08","E":"110.29","firststr":"Z"},{"city":"\u6f33\u5dde","N":"24.31","E":"117.39","firststr":"Z"},{"city":"\u682a\u6d32","N":"27.51","E":"113.09","firststr":"Z"},{"city":"\u8d44\u5174","N":"25.58","E":"113.13","firststr":"Z"},{"city":"\u5f20\u6396","N":"38.56","E":"100.26","firststr":"Z"},{"city":"\u662d\u901a","N":"27.2","E":"103.42","firststr":"Z"},{"city":"\u589e\u57ce","N":"23.18","E":"113.49","firststr":"Z"},{"city":"\u6e5b\u6c5f","N":"21.11","E":"110.24","firststr":"Z"},{"city":"\u8087\u5e86","N":"23.03","E":"112.27","firststr":"Z"},{"city":"\u4e2d\u5c71","N":"22.31","E":"113.22","firststr":"Z"},{"city":"\u821f\u5c71","N":"30.01","E":"122.06","firststr":"Z"},{"city":"\u73e0\u6d77","N":"22.17","E":"113.34","firststr":"Z"},{"city":"\u8bf8\u66a8","N":"29.43","E":"120.14","firststr":"Z"},{"city":"\u5f20\u5bb6\u6e2f","N":"31.52","E":"120.32","firststr":"Z"},{"city":"\u91cd\u5e86\u5e02","N":"29.35","E":"106.33","firststr":"Z"},{"city":"\u9547\u6c5f","N":"32.11","E":"119.27","firststr":"Z"},{"city":"\u6a1f\u6811","N":"28.03","E":"115.32","firststr":"Z"},{"city":"\u9075\u4e49","N":"27.42","E":"106.55","firststr":"Z"},{"city":"\u510b\u5dde","N":"19.31","E":"109.34","firststr":"Z"},{"city":"\u5e84\u6cb3","N":"39.41","E":"122.58","firststr":"Z"},{"city":"\u5f20\u5bb6\u53e3","N":"40.48","E":"114.53","firststr":"Z"},{"city":"\u6dbf\u5dde","N":"39.29","E":"115.59","firststr":"Z"},{"city":"\u9075\u5316","N":"40.11","E":"117.58","firststr":"Z"},{"city":"\u90d1\u5dde","N":"34.46","E":"113.4","firststr":"Z"},{"city":"\u624e\u5170\u5c6f","N":"48","E":"122.47","firststr":"Z"},{"city":"\u5468\u53e3","N":"33.37","E":"114.38","firststr":"Z"},{"city":"\u9a7b\u9a6c\u5e97","N":"32.58","E":"114.01","firststr":"Z"},{"city":"\u67a3\u5e84","N":"34.52","E":"117.33","firststr":"Z"},{"city":"\u7ae0\u4e18","N":"36.43","E":"117.32","firststr":"Z"},{"city":"\u62db\u8fdc","N":"37.21","E":"120.23","firststr":"Z"},{"city":"\u8bf8\u57ce","N":"35.59","E":"119.24","firststr":"Z"},{"city":"\u6dc4\u535a","N":"36.48","E":"118.03","firststr":"Z"},{"city":"\u90b9\u57ce","N":"35.24","E":"116.58","firststr":"Z"},{"city":"\u8087\u4e1c","N":"46.04","E":"125.58","firststr":"Z"}]}}
area.vue
<template>
<div>
<div class='main' >
<div class="view_search">
<div @submit="formSubmit" class="view_searchbg">
<label>
<div class="img_wrap"></div>
<button class="img_btn" hidden type="submit" name="search"></button>
</label>
<input v-model="inputText" type="text" class="input" @keypress="formSubmit" name="keyword" placeholder="请输入关键字..."/>
</div>
</div>
<div class="slide">
<a v-for="(item, index) in temABC" :key='index'>
<span class="temABC" @click="slide(item)">{{item}}</span>
</a>
</div>
<div v-if="show==1">
<div class="yin">{{strA}}</div>
</div>
<div class="top" :style="`height: ${screenHeight}px`" ref="topContainer">
<div class="common">当前城市</div>
<div class="city" ">{{position.city}}</div>
<div class="common">热门城市</div>
<div class="hotaddr">
<div v-for="(item, index) in hotaddr" :key="index">
<div class="cityx"> {{item.city}}</div>
</div>
</div>
<div class="common sort">排序城市</div>
<div v-for="(item, index) in addr" :key="index" :id="item.key">
<div class="sort">{{item.key}}</div>
<div v-for="(item1, key) in item.item" :key="key">
<div class="add" @click="add(item1.N, item1.E, item1.city)"> {{item1.city}}</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import addr from '@/common/js/add' //引用add.js
export default{
// props: ['position'], //父组件传过来的值，由于是模拟，所以可以将position的数据写死
data() {
return {
position: {
city: "深圳市",
lat: parseFloat(22.553329),
lng: parseFloat(113.88308)
},
temABC: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'],
hotaddr: [
{
"city": "北京市",
"N": "39.55",
"E": "116.24",
"firststr": "B"
}, {
"city": "成都市",
"N": "30.4",
"E": "104.04",
"firststr": "C"
}, {
"city": "佛山市",
"N": "23.02",
"E": "113.06",
"firststr": "F"
}, {
"city": "广州市",
"N": "23.08",
"E": "113.14",
"firststr": "G"
}, {
"city": "杭州市",
"N": "30.16",
"E": "120.1",
"firststr": "H"
}, {
"city": "南京市",
"N": "32.03",
"E": "118.46",
"firststr": "N"
}, {
"city": "深圳市",
"N": "22.33",
"E": "114.07",
"firststr": "S"
}, {
"city": "上海市",
"N": "31.14",
"E": "121.29",
"firststr": "S"
}, {
"city": "天津市",
"N": "39.02",
"E": "117.12",
"firststr": "T"
}, {
"city": "武汉市",
"N": "30.35",
"E": "114.17",
"firststr": "W"
}, {
"city": "西安市",
"N": "34.17",
"E": "108.57",
"firststr": "X"
}, {
"city": "重庆市",
"N": "29.35",
"E": "106.33",
"firststr": "Z"
}
],
addr: addr,
show: 0,
strA: [],
screenHeight: 0,
inputText: ''
}
},
created() {
this.screenHeight = window.screen.availHeight-125; //设置#topdiv的高度
},
methods: {
slide(item) {
let that = this;
this.show = 1; //弹出右侧点击的字母
this.strA = item;
for(let key in addr) {
if(item == key) { //判断城市列表中是否包含右侧点击的字母，不判断会报错
let slideScrollHeight = this.querySelector('#'+item).offsetTop-65; //计算要滚动的距离
this.$refs.topContainer.scrollTop = slideScrollHeight; //赋值给需要滚动的盒子
}
}
setTimeout(function () {
that.show = 0; //两秒后关闭
}, 2000)
},
formSubmit() { //找出与搜索框对应的城市，
for(let i in addr) {
for(let j in addr[i].item) {
if(this.inputText == addr[i].item[j].city) {
this.address
}
}
}
}
}
}
</script>
<style lang="less" rel="stylesheet/less">
.main {
width: 100%;
height: 92%;
overflow: hidden;
position: fixed;
top: 0;
left: 0;
background-color: #fff;
z-index: 999;
.view_search {
width: 100%;
height: 1.25rem;
background: #ffffff;
display: flex;
position: relative;
flex-direction: row;
align-items: center;
justify-content: center;
margin-bottom: 0.2rem;
.view_searchbg {
width: 6.83rem;
border-radius: 0.1rem;
height: 0.6rem;
border-style: solid;
border-width: 1px;
overflow: hidden;
line-height: 0;
border-color: #cdcdcd;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
position: relative;
background-color: #fff;
}
.img_wrap {
width: 0.84rem;
height: 0.6rem;
background-image: url(http://tws.cnweisou.com/images/search.png);
background-size: 0.44rem 0.44rem;
background-repeat: no-repeat;
background-position: 0.2rem 0.08rem;
}
.img_btn {
width: 0.84rem;
height: 0.6rem;
background-color: #fff;
position: absolute;
left: 0;
top: 0;
z-index: 3;
border-color: transparent;
}
.input{
border: 0;
&:focus{
outline: 0;
}
}
}
/* 当前城市 */
.top {
overflow-x: hidden;
overflow-y: scroll;
font-size: 0.26rem;
line-height: 0.6rem;
padding-left: 3%;
width: 97%;
height: 12rem;
display: inline-block;
.city {
width: 1.45rem;
height: 0.56rem;
text-align: center;
margin-right: 0.2rem;
margin-bottom: 0.2rem;
border-radius: 0.8rem;
border: 1px solid #6ab3d1;
color: #55bad3;
display: inline-block;
}
.hotaddr {
display: flex;
flex-wrap: wrap;
align-content: stretch;
justify-content: center;
.cityx {
width: 1.45rem;
height: 0.56rem;
text-align: center;
margin-right: 0.2rem;
margin-bottom: 0.2rem;
border-radius: 0.08rem;
border: 1px solid #d5d5d5;
color: black;
display: inline-block;
font-size: 0.26rem;
}
}
}
}
/*排序城市*/
.footer1 {
display: flex;
flex-direction: column;
font-size: 0.26rem;
line-height: 0.6rem;
}
.add {
line-height: 0.8rem;
font-size: 0.26rem;
padding-left: 0.3rem;
}
/*右侧*/
.slide {
width: 0.4rem;
height: 100%;
position: fixed;
right: 0;
top: 1.2rem;
color: #6ab3d1;
display: flex;
flex-direction: column;
font-size: 0.24rem;
text-align: center;
z-index: 3;
}
/*阴影*/
.yin {
width: 1.75rem;
height: 1.75rem;
background-color: rgba(0, 0, 0, 0.4);
position: fixed;
top: 30%;
left: 40%;
text-align: center;
line-height: 1.75rem;
color: white;
border-radius: 0.08rem;
font-size: 0.8rem;
z-index: 9;
}
.input {
position: absolute;
left: 1rem;
top: 0;
height: 0.6rem;
background-color: #fff;
font-size: 0.28rem;
}
.temABC {
margin-top: 0.04rem;
}
.common {
margin-bottom: 0.1rem;
font-weight: bolder;
width: 100%;
}
.sort {
margin-left: 0.3rem;
}
</style>
具体的说明在里面有注册，可以直接去试试，效果实现，
注：还没有实现滚动动画，和左边滑动，右边对应的跳对应的字母，这两个功能可以用better-scroll这个插件，仿饿了么这个项目也是根据better-scroll这个插件实现联级滚动