jquery实现点击菜单实现高德地图定位点与数据展示联动效果

大G哥

于 2024-10-14 15:08:23 发布

阅读量1.2k

点赞数 20

文章标签： jquery 前端 javascript ecmascript

本文链接：https://blog.youkuaiyun.com/Java_fenxiang/article/details/142932848

版权

🍊`jquery`实现点击菜单实现高德地图定位点与数据展示联动效果

版本介绍：

jQuery v3.7.1

高德地图JS API 2.0

代码仓库 ⭐

Gitee： https://gitee.com/NewTea19/js-case/tree/master/3. 点击菜单实现高德地图定位点与数据展示联动效果/case

1.启动说明 📔

推荐VS Code编辑器
插件Live Server插件
使用Live Server启动index.html,访问即可

2. 效果图加功能说明 🔨

效果图1：(点击省份进入城市marker点标记)
效果图2：(点击左侧菜单定位对应marker点)
效果图3：(初始页面，点击左侧市场菜单，进入菜单列表页并将marker标记添加)
效果图4：(marker标记信息弹窗内点击，返回到省份)

4. 文件结构 📚

├─ data
│  ├─ getLeftMenu.json            # 左侧菜单数据
│  ├─ getProvinceClass.json       # 获取省code数据
│  ├─ getProvinceClass.json       # 省份信息弹窗数据
├─ css
│  ├─ amap.css                    # 地图与左侧菜单样式
│  ├─ base.css                    # 基础样式文件
├─ js
│  ├─ amap.js                     # 地图与左侧菜单js文件
│  ├─ jquery-3.7.1.json           # 基础样式文件
├─ index.html                     # 入口文件

5. 示例代码 📖

index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./css/base.css">
  <link rel="stylesheet" href="./css/amap.css">
  <link rel="stylesheet" href="https://style.feijiu.net/css/shichang/scbase.css">
  <link rel="stylesheet" href="https://style.feijiu.net/css/shichang/scindex.css">
  <script src="./js/jquery-3.7.1.js"></script>
  <script src="https://webapi.amap.com/loader.js"></script>
  <script src="./js/amap.js"></script>
</head>

<body>
  <div class="container">
    <!-- 左侧菜单 -->
    <div class="menuContainer" id="menuContainer">
      <a rel="nofollow" href="javascript:void(0);" onclick="getMenu('水果市场')" title="水果市场">水果市场</a>
    </div>
    <!-- 地图区域 -->
    <div class="mapContainer" id="mapContainer"></div>
  </div>

  <script type="text/javascript">
    window._AMapSecurityConfig = {
          
      securityJsCode: "「你申请的安全密钥」", 
    };
  </script>
  <script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=替换为你申请的 key"></script>

  <!-- 加载高德地图 -->
  <script type="text/javascript">
    initialize()

    $(document).ready(function () {
          
      $ajax('getProvinceClass', drawMapText)
    });
  </script>
  <!-- 封装ajax方法 -->
  <script type="text/javascript">
    const $ajax = (url, cb) => {
          
      $.ajax({
          
        url: `./data/${
            url}.json`,
        type: 'GET',
        dataType: 'json',
        success: function (data) {
          
          cb && cb(data)
        },
        error: function (xhr, status, error) {
          
          console.error("Error loading JSON file: " + error);
        }
      });
    }
  </script>
</body>

</html>

逻辑文件amap.js

/**
 * @function getPosition
 * @description 初始化处理省数据,用于定位Marker和targetName显示
 * @param {
         string} adcode: 区域编码
 */
const getPosition = (adcode) => {
        
  let str = "";
  switch (adcode) {
        
    case "110000":
      str = "北京市_116.395825_39.941005";
      break;
    case "120000":
      str = "天津市_117.210813_39.14393";
      break;
    case "130000":
      str = "河北省_115.177813_38.206007";
      break;
    case "140000":
      str = "山西省_112.564662_37.872049";
      break;
    case "150000":
      str = "内蒙古_110.052771_41.34515";
      break;
    case "210000":
      str = "辽宁省_123.004468_41.455972";
      break;
    case "220000":
      str = "吉林省_126.346847_43.833111";
      break;
    case "230000":
      str = "黑龙江省_128.664906_46.690662";
      break;
    case "310000":
      str = "上海市_121.416372_31.45115";
      break;
    case "320000":
      str = "江苏省_119.31908_32.642047";
      break;
    case "330000":
      str = "浙江省_120.827658_30.180849";
      break;
    case "340000":
      str = "安徽省_116.840281_31.83996";
      break;
    case "350000":
      str = "福建省_118.680011_26.017147";
      break;
    case "360000":
      str = "江西省_116.545924_28.190379";
      break;
    case "370000":
      str = "山东省_118.900778_36.486773";
      break;
    case "410000":
      str = "河南省_114.779784_34.986831";
      break;
    case "420000":
      str = "湖北省_113.602357_30.892777";
      break;
    case "430000":
      str = "湖南省_112.130573_27.929244";
      break;
    case "440000":
      str = "广东省_114.083052_23.555889";
      break;
    case "450000":
      str = "广西_109.152576_23.080123";
      break;
    case "460000":
      str = "海南省_110.072441_19.494242";
      break;
    case "500000":
      str = "重庆市_107.377359_29.631998";
      break;
    case "510000":
      str = "四川省_103.182775_30.528033";
      break;
    case "520000":
      str = "贵州省_106.199932_26.399788";
      break;
    case "530000":
      str = "云南省_102.189321_24.66383";
      break;
    case "540000":
      str = "西藏_92.365164_29.792605";
      break;
    case "610000":
      str = "陕西省_108.334018_34.150637";
      break;
    case "620000":
      str = "甘肃省_104.249818_35.756198";
      break;
    case "630000":
      str = "青海省_100.975099_36.353776";
      break;
    case "640000":
      str = "宁夏_107.119797_38.322051";
      break;
    case "650000":
      str = "新疆_88.538527_43.616418";
      break;
    case "710000":
      str = "台湾_121.359304_24.461909";
      break;
    case "810000":
      str = "香港_115.067429_22.63010