当前位置：首页 > JavaScript

js实现江苏

2026-03-15 06:30:03JavaScript

根据网络搜索结果，以下是江苏地区相关信息的JavaScript实现方法，涵盖地图展示、数据可视化及特色功能开发：

js实现江苏

地图展示（高德/百度API）

以高德地图为例，展示江苏省地图并标记主要城市：

js实现江苏

// 初始化地图
const map = new AMap.Map('map-container', {
  viewMode: '2D',
  zoom: 7,
  center: [118.7674, 32.0415] // 江苏省大致中心坐标
});

// 添加江苏省边界图层
AMap.plugin('AMap.DistrictSearch', () => {
  const district = new AMap.DistrictSearch({
    extensions: 'all',
    level: 'province'
  });
  district.search('江苏省', (status, result) => {
    const bounds = result.districtList[0].boundaries;
    bounds.forEach(boundary => {
      new AMap.Polygon({
        path: boundary,
        strokeColor: "#0091ea",
        fillColor: "#00b0ff",
        fillOpacity: 0.4
      }).setMap(map);
    });
  });
});

经济数据可视化（ECharts）

使用ECharts展示江苏省2022年GDP数据：

const chart = echarts.init(document.getElementById('chart-container'));
const option = {
  title: { text: '江苏省各市GDP排名（2022）' },
  tooltip: {},
  xAxis: {
    data: ['苏州', '南京', '无锡', '南通', '常州', '徐州', '盐城', '扬州', '泰州', '镇江', '淮安', '连云港', '宿迁']
  },
  yAxis: { type: 'value' },
  series: [{
    name: 'GDP（亿元）',
    type: 'bar',
    data: [23958, 16907, 14851, 11380, 9550, 8458, 7080, 7105, 6402, 5027, 4742, 4005, 4112]
  }]
};
chart.setOption(option);

特色功能实现（方言识别）

江苏方言识别示例（基于Web Speech API）：

const recognition = new webkitSpeechRecognition();
recognition.lang = 'cmn-Hans-CN';
recognition.onresult = (event) => {
  const transcript = event.results[0][0].transcript;
  document.getElementById('result').innerHTML = 
    transcript.includes('阿吃过啦') ? '检测到南京方言' : 
    transcript.includes('弗晓得') ? '检测到苏州方言' : '普通话';
};
document.getElementById('start-btn').addEventListener('click', () => recognition.start());