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

版本介绍：

  • jQuery v3.7.1
  • 高德地图JS API 2.0
代码仓库 ⭐
1.启动说明 📔
  1. 推荐VS Code编辑器
  2. 插件Live Server插件
  3. 使用Live Server启动index.html,访问即可
2. 效果图加功能说明 🔨
  • 效果图1：(点击省份进入城市marker点标记)jquery实现点击菜单实现高德地图定位点与数据展示联动效果_高德地图
  • 效果图2：(点击左侧菜单定位对应marker点)jquery实现点击菜单实现高德地图定位点与数据展示联动效果_信息弹窗_02
  • 效果图3：(初始页面，点击左侧市场菜单，进入菜单列表页并将marker标记添加)jquery实现点击菜单实现高德地图定位点与数据展示联动效果_amap_03
  • 效果图4：(marker标记信息弹窗内点击，返回到省份)jquery实现点击菜单实现高德地图定位点与数据展示联动效果_marker_04
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                     # 入口文件
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
5. 示例代码 📖
  1. 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>
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41.
  • 42.
  • 43.
  • 44.
  • 45.
  • 46.
  • 47.
  • 48.
  • 49.
  • 50.
  • 51.
  • 52.
  • 53.
  • 54.
  • 55.
  • 56.
  • 57.
  • 58.
  • 59.
  • 60.
  1. 逻辑文件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.630108";
      break;
    case "820000":
      str = "澳门_113.338083_22.151047";
      break;
    default:
      str = "北京市_116.395825_39.941005";
      break;
  }

  const position = str.split("_");
  return {
    targetName: position[0],
    longitude: position[1],
    latitude: position[2],
  };
};

/**
 * @function initialize
 * @description 初始化渲染地图
 */
let map = undefined;
const initialize = () => {
  map = new AMap.Map("mapContainer", {
    zoom: 4,
    zooms: [4, 20],
    center: [116.404, 39.915],
  });
  map.plugin(
    ["AMap.Scale", "AMap.ToolBar", "AMap.ControlBar", "AMap.HawkEye"],
    () => {
      map.addControl(new AMap.Scale()); //比例尺
      map.addControl(
        new AMap.ToolBar({
          position: "RT",
        })
      ); //工具条
      map.addControl(new AMap.ControlBar()); //工具条方向盘
      map.addControl(new AMap.HawkEye()); //鹰眼
    }
  );
};

/**
 * @function drawMapText
 * @description 主要用于自定义文本点标记Marker
 * @param  {string} adlist:区域列表
 */
const drawMapText = (adlist) => {
  const { list = [] } = adlist;

  list.forEach((item) => {
    const position = getPosition(item.province_code);
    const { targetName, longitude, latitude } = position;

    const mapText = new AMap.Text({
      text: targetName,
      position: [longitude, latitude],
      topWhenClick: "true",
      anchor: "center",
      cursor: "pointer",
      style: {
        width: "52px",
        height: "18px",
        padding: "0",
        textAlign: "center",
        lineHeight: "18px",
        fontSize: "12px",
        fontWeight: "700",
        color: "#fff",
        border: "none",
        borderRadius: "5px",
        backgroundColor: "#f5222d",
        whiteSpace: "nowrap",
        MozUserSelect: "none",
      },
    });
    mapText.on("mouseover", () => {
      mapText.setStyle({
        backgroundColor: "#096dd9",
      });
    });
    mapText.on("mouseout", () => {
      mapText.setStyle({
        backgroundColor: "#f5222d",
      });
    });
    mapText.on("click", () => {
      drawProvinceInfo(item.province_code, position);
    });
    mapText.add(map);
  });
};

/**
 * @function drawProvinceInfo
 * @description 点击自定义Marker省份按钮,渲染信息窗体
 * @param  {string} adcode:区域编码
 * @param  {string} targetName:当前省名称
 * @param  {string} longitude:当前经度
 * @param  {string} latitude:当前维度
 */
const drawProvinceInfo = (adcode, { targetName, longitude, latitude }) => {
  $ajax("getProvinceInfo", ({ data: { domContent = "", count = 0 } }) => {
    const content = `
        <div class="infoContainer">
          <div class="infoTitle">
            <h2 id="h0">${targetName}</h2>
            <span>${targetName}范围内共<b style="color:#f5222d;">${count}</b>种水果</span>
          </div>
          <div class="infoContent">
            <div class="infoContentTitle">水果种类</div>
            <ul class="infoContentBox">${domContent}</ul>
          </div>
          <div class="infoBottom">
            <button onclick="drawProvinceDistribute('${adcode}')">${targetName}市场分布</button>
          </div>
        </div>`;
    const infoWindow = new AMap.InfoWindow({
      isCustom: false,
      closeWhenClickMap: true,
      content,
      offset: new AMap.Pixel(0, -10),
    });
    infoWindow.open(map, [longitude, latitude]);
  });
};

/**
 * @function drawProvinceDistribute
 * @description 点击市场分布按钮,查看全部市场分部与渲染区域边界
 * @param  {string} adcode:区域编码
 */
const drawProvinceDistribute = (adcode) => {
  const { targetName, longitude, latitude } = getPosition(adcode);

  // 清除地图图层等操作
  map.setZoomAndCenter(6, [longitude, latitude], true);
  map.setZooms([5, 20]);

  // 绘制边界
  drawBounds(adcode);

  // 获取市场数据
  getMenu(targetName);
};

/**
 * @function drawBounds
 * @description 绘制行政省边界区域
 * @param  {string} keyword:行政区code
 */
let district = null;
let polygon = null;
const drawBounds = (keyword) => {
  map.plugin("AMap.DistrictSearch", () => {
    if (!district) {
      //实例化DistrictSearch
      district = new AMap.DistrictSearch({
        subdistrict: 0,
        extensions: "all",
        level: "province",
      });
    }

    // 行政区查询
    district.search(keyword, (status, result) => {
      if (polygon) {
        map.remove(polygon); //清除上次结果
        polygon = null;
      }
      if (status !== "complete") {
        return;
      }

      const bounds = result.districtList[0].boundaries;
      if (bounds) {
        //生成行政区划polygon
        for (let i = 0; i < bounds.length; i += 1) {
          //构造MultiPolygon的path
          bounds[i] = [bounds[i]];
        }
        polygon = new AMap.Polygon({
          strokeWeight: 1,
          path: bounds,
          fillOpacity: 0.4,
          fillColor: "#80d8ff",
          strokeColor: "#0091ea",
        });
        map.add(polygon);
        // 视口自适应
        map.setFitView(polygon, true, [60, 60, 60, 60]);
      }
    });
  });
};

/**
 * @Start 市场分布
 * --------------------------------------------------------------------
 */

/**
 * @function getMenu
 * @description 获取市场列表数据并渲染在左侧菜单区域
 * @param  {string} urlFlag: 区分url标记
 * @param  {string} title:行业标题
 * @param  {string} adcode:区域编码
 */
const getMenu = (title) => {
  map.clearMap();
  // 请求菜单数据
  $ajax("getLeftMenu", ({ list: menus = [] }) => {
    let menuHTML = `
      <div class="menuTitle">
        <a rel="nofollow" href="javascript:void(0)" onclick="location.reload()">所有市场</a>
        >
        <span>所选：</span>
        <span class="menuSelected"> ${title}</span>
      </div>
      <div>
      `;
    menus.forEach((menu, idx) => {
      menuHTML += `
        <div class="menuBox" sort="${idx + 1}">
          <div class="icon">${idx + 1}</div>
          <div class="menuContent">
            <div class="menuName">${menu.name}</div>
            <div class="menuInfo">
              <p>经营范围：${menu.businessScope}</p>
              <p>供求信息：${menu.supplyNum}条</p>
              <p>现货信息：${menu.stockNum}条</p>
            </div>
          </div>
        </div>
        `;
      // 地图添加市场标记
      drawMapMarker(menu, idx + 1 + "");
    });
    document.getElementById("menuContainer").innerHTML = menuHTML + "</div>";

    // 绑定事件
    bindMenuEvent(menus);
  });
};

/**
 * @function bindMenuEvent
 * @description 左侧菜单元素绑定移入移出和点击事件
 */
const bindMenuEvent = (menus) => {
  jQuery("div.menuBox").hover(
    function () {
      $(this).children("div.icon").css("background-color", "#fff");
      $(this).children("div.icon").css("color", "#2e3243");
      const sort = $(this).attr("sort");
      mapMarkHighlight(sort, true);
    },
    function () {
      $(this).children("div.icon").css("background-color", "#333333");
      $(this).children("div.icon").css("color", "#fff");
      const sort = $(this).attr("sort");
      mapMarkHighlight(sort);
    }
  );

  jQuery("div.menuBox").click(function () {
    $(this).children("div.icon").css("background-color", "#fff");
    $(this).children("div.icon").css("color", "#2e3243");
    const sort = $(this).attr("sort");
    drawMarketInfo(menus[sort - 1]);
  });
};

/**
 * @function drawMapMarker
 * @description 为地图上添加市场对应的Marker标记
 * @param {object} menu:市场数据
 * @param {string} idx:索引
 */
const drawMapMarker = (menu, idx) => {
  const longitude = menu.longitude * 1;
  const latitude = menu.latitude * 1;
  const mapMarker = new AMap.Marker({
    map: map,
    size: new AMap.Size(25, 33),
    content: `<div class="marketIcon">${idx}</div>`,
    position: [longitude, latitude],
    offset: new AMap.Pixel(-13, -30),
  });
  mapMarker.on("mouseover", () => {
    mapMarkHighlight(idx, true);
  });
  mapMarker.on("mouseout", () => {
    mapMarkHighlight(idx);
  });
  mapMarker.on("click", () => {
    drawMarketInfo(menu);
  });
};

/**
 * @function mapMarkHighlight
 * @description 地图标志高亮
 * @param  {string} idx: 当前移入的marker索引
 * @param  {boolean} isHover:是否移入
 */
const mapMarkHighlight = (idx, isHover = false) => {
  jQuery.each(jQuery("div.marketIcon"), function () {
    if (jQuery(this).html() === idx && isHover) {
      jQuery(this).addClass("marketIcon-hover");
    } else {
      jQuery(this).removeClass("marketIcon-hover");
    }
  });
};

/**
 * @function drawMarketInfo
 * @description 点击市场信息自定义Marker点,渲染市场详情信息窗体
 * @param  {string} info:当前市场详情信息
 */
let marketInfo = null;
const drawMarketInfo = (info) => {
  if (marketInfo !== null) {
    marketInfo.close();
    marketInfo = null;
  }
  const content = `
    <div class="marketContainer">
        <a rel="nofollow" href='${info.link}' target='_blank'>
          <img src='${
            info.photo ||
            "https://img1.baidu.com/it/u=2063777893,3765279289&fm=253&fmt=auto&app=120&f=GIF?w=218&h=218"
          }'>
        </a>
        <div class='marketContent'>
          <ul>
            <li>
              <b style='font-size:14px;'>
                <a rel="nofollow" href='${info.link}' target='_blank'>
                  ${info.name}
                </a>
              </b>
            </li>
            <li>经营范围：${info.businessScope}</li>
            <li>供求信息：${info.supplyNum}</li>
            <li>现货信息：${info.stockNum}</li>
          </ul>
          <div class= 'marketBottom'>
            <a rel="nofollow" href="javascript:void(0);" onclick="drawProvinceDistribute('${
              info.province
            }')">
              ${getPosition(info.province)["targetName"]}所有市场
            </a>
          </div>
        </div>
    </div>
  `;
  marketInfo = new AMap.InfoWindow({
    isCustom: false,
    closeWhenClickMap: true,
    content,
    offset: new AMap.Pixel(-5, -32),
  });
  const longitude = info.longitude * 1;
  const latitude = info.latitude * 1;
  map.setCenter([longitude, latitude], true);
  marketInfo.open(map, [longitude, latitude]);
};
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41.
  • 42.
  • 43.
  • 44.
  • 45.
  • 46.
  • 47.
  • 48.
  • 49.
  • 50.
  • 51.
  • 52.
  • 53.
  • 54.
  • 55.
  • 56.
  • 57.
  • 58.
  • 59.
  • 60.
  • 61.
  • 62.
  • 63.
  • 64.
  • 65.
  • 66.
  • 67.
  • 68.
  • 69.
  • 70.
  • 71.
  • 72.
  • 73.
  • 74.
  • 75.
  • 76.
  • 77.
  • 78.
  • 79.
  • 80.
  • 81.
  • 82.
  • 83.
  • 84.
  • 85.
  • 86.
  • 87.
  • 88.
  • 89.
  • 90.
  • 91.
  • 92.
  • 93.
  • 94.
  • 95.
  • 96.
  • 97.
  • 98.
  • 99.
  • 100.
  • 101.
  • 102.
  • 103.
  • 104.
  • 105.
  • 106.
  • 107.
  • 108.
  • 109.
  • 110.
  • 111.
  • 112.
  • 113.
  • 114.
  • 115.
  • 116.
  • 117.
  • 118.
  • 119.
  • 120.
  • 121.
  • 122.
  • 123.
  • 124.
  • 125.
  • 126.
  • 127.
  • 128.
  • 129.
  • 130.
  • 131.
  • 132.
  • 133.
  • 134.
  • 135.
  • 136.
  • 137.
  • 138.
  • 139.
  • 140.
  • 141.
  • 142.
  • 143.
  • 144.
  • 145.
  • 146.
  • 147.
  • 148.
  • 149.
  • 150.
  • 151.
  • 152.
  • 153.
  • 154.
  • 155.
  • 156.
  • 157.
  • 158.
  • 159.
  • 160.
  • 161.
  • 162.
  • 163.
  • 164.
  • 165.
  • 166.
  • 167.
  • 168.
  • 169.
  • 170.
  • 171.
  • 172.
  • 173.
  • 174.
  • 175.
  • 176.
  • 177.
  • 178.
  • 179.
  • 180.
  • 181.
  • 182.
  • 183.
  • 184.
  • 185.
  • 186.
  • 187.
  • 188.
  • 189.
  • 190.
  • 191.
  • 192.
  • 193.
  • 194.
  • 195.
  • 196.
  • 197.
  • 198.
  • 199.
  • 200.
  • 201.
  • 202.
  • 203.
  • 204.
  • 205.
  • 206.
  • 207.
  • 208.
  • 209.
  • 210.
  • 211.
  • 212.
  • 213.
  • 214.
  • 215.
  • 216.
  • 217.
  • 218.
  • 219.
  • 220.
  • 221.
  • 222.
  • 223.
  • 224.
  • 225.
  • 226.
  • 227.
  • 228.
  • 229.
  • 230.
  • 231.
  • 232.
  • 233.
  • 234.
  • 235.
  • 236.
  • 237.
  • 238.
  • 239.
  • 240.
  • 241.
  • 242.
  • 243.
  • 244.
  • 245.
  • 246.
  • 247.
  • 248.
  • 249.
  • 250.
  • 251.
  • 252.
  • 253.
  • 254.
  • 255.
  • 256.
  • 257.
  • 258.
  • 259.
  • 260.
  • 261.
  • 262.
  • 263.
  • 264.
  • 265.
  • 266.
  • 267.
  • 268.
  • 269.
  • 270.
  • 271.
  • 272.
  • 273.
  • 274.
  • 275.
  • 276.
  • 277.
  • 278.
  • 279.
  • 280.
  • 281.
  • 282.
  • 283.
  • 284.
  • 285.
  • 286.
  • 287.
  • 288.
  • 289.
  • 290.
  • 291.
  • 292.
  • 293.
  • 294.
  • 295.
  • 296.
  • 297.
  • 298.
  • 299.
  • 300.
  • 301.
  • 302.
  • 303.
  • 304.
  • 305.
  • 306.
  • 307.
  • 308.
  • 309.
  • 310.
  • 311.
  • 312.
  • 313.
  • 314.
  • 315.
  • 316.
  • 317.
  • 318.
  • 319.
  • 320.
  • 321.
  • 322.
  • 323.
  • 324.
  • 325.
  • 326.
  • 327.
  • 328.
  • 329.
  • 330.
  • 331.
  • 332.
  • 333.
  • 334.
  • 335.
  • 336.
  • 337.
  • 338.
  • 339.
  • 340.
  • 341.
  • 342.
  • 343.
  • 344.
  • 345.
  • 346.
  • 347.
  • 348.
  • 349.
  • 350.
  • 351.
  • 352.
  • 353.
  • 354.
  • 355.
  • 356.
  • 357.
  • 358.
  • 359.
  • 360.
  • 361.
  • 362.
  • 363.
  • 364.
  • 365.
  • 366.
  • 367.
  • 368.
  • 369.
  • 370.
  • 371.
  • 372.
  • 373.
  • 374.
  • 375.
  • 376.
  • 377.
  • 378.
  • 379.
  • 380.
  • 381.
  • 382.
  • 383.
  • 384.
  • 385.
  • 386.
  • 387.
  • 388.
  • 389.
  • 390.
  • 391.
  • 392.
  • 393.
  • 394.
  • 395.
  • 396.
  • 397.
  • 398.
  • 399.
  • 400.
  • 401.
  • 402.
  • 403.
  • 404.
  • 405.
  • 406.
  • 407.
  • 408.
  • 409.
  • 410.
  • 411.
  • 412.
  • 413.
  • 414.
  • 415.
  • 416.
  • 417.
  • 418.
  • 419.
  • 420.
  • 421.
  • 422.
  • 423.
  • 424.
  • 425.
  • 426.
  • 427.
  • 428.
  • 429.
  • 430.
  • 431.
  • 432.
  • 433.
  • 434.
  • 435.
  • 436.
  • 437.
  • 438.
  • 439.
  • 440.
  • 441.
  • 442.
  • 443.
  • 444.
  • 445.
  • 446.
  • 447.
  • 448.
  • 449.
  • 450.
  • 451.
  • 452.
  • 453.
  • 454.
  • 455.
  • 456.
  • 457.
  • 458.
  • 459.
  • 460.
  • 461.
  • 462.
  • 463.
  • 464.
  • 465.
  • 466.
  • 467.
  • 468.
  • 469.
  • 470.
  • 471.
  • 472.
  • 473.
  • 474.
  • 475.
  • 476.
  • 477.
  1. amap.css
/* 点击省按钮信息窗体样式 */
.amap-info-content {
  padding: 0;
}

/* close 按钮 */
.amap-info-close {
  top: 2px;
  right: 2px;
  background: #fff;
}

.infoContainer {
  width: 320px;
  display: flex;
  flex-direction: column;
}

.infoTitle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px;
}

.infoTitle span {
  margin-right: 10px;
}

.infoContent {
  padding: 5px 0 0 8px;
  color: #666;
  border-top: 2px solid #d9d9d9;
  background-color: #e8e6e6;
}

.infoContentTitle {
  font-size: 12px;
  font-weight: bold;
  border-bottom: 1px dotted #ccc
}

ul.infoContentBox {
  height: 60px;
  padding-top: 6px;
}

.infoBottom {
  padding: 8px 0;
  background: #fff;
  text-align: center;
}

.infoBottom button {
  height: 30px;
  padding: 2px 5px;
  background: linear-gradient(45deg, #f5222d, #096dd9);
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.infoBottom button:hover {
  filter: brightness(120%);
  filter: drop-shadow(0 0 2px rgba(0, 0, 0, .5))
}

/* 市场信息窗体样式 */
.marketContainer {
  display: flex;
  width: 350px;
  height: 110px;
  overflow: hidden;
  border: 1px solid #999;
  background: #f6f6f6;
}

.marketContainer a img {
  width: 130px;
  height: 100px;
  margin: 5px;
  object-fit: cover;
}

.marketContent {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  margin: 5px;
}

.marketContent ul {
  overflow: auto;
}

.marketBottom {
  width: 200px;
  height: 20px;
  margin-top: 5px;
  border-top: 1px solid #ccc;
}

.marketIcon {
  position: absolute;
  width: 20px;
  height: 32px;
  line-height: 16px;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  background: url('../images/icon_position.png') no-repeat 0 0px;
  cursor: pointer;
  white-space: nowrap;
}


/* 修改Marker移入样式 */
.marketIcon-hover {
  background-position: 0 -33px !important;
}

/* 左侧菜单样式 */

.menuTitle {
  width: 100%;
  height: 50px;
  color: #fff;
  overflow: hidden;
  line-height: 50px;
  text-indent: 15px;
  font-size: 14px;
  background-color: #2e3243;
  border-bottom: 1px solid #f5222d;
}

.menuTitle a {
  color: #fff;
}

.menuSelected {
  color: #faad14;
  font-weight: 700;
}

.menuBox {
  display: flex;
  justify-content: space-between;
  padding: 10px;
  border-bottom: 1px dotted #2e3243;
  cursor: pointer;
}

.menuBox:hover{
  color: #fff;
  background-color: #2e3243;
}

.menuBox .icon {
  width: 20px;
  height: 20px;
  text-align: center;
  line-height: 18px;
  color: #fff;
  background-color: #333333;
  border-radius: 20px;
}

.menuBox .menuContent {
  display: flex;
  flex: 1;
  flex-direction: column;
  margin-left: 8px;
  line-height: 16px
}

.menuBox .menuContent .menuName {
  font-weight: 700
}

.menuBox .menuContent .menuInfo p{
  margin: 5px 0;
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41.
  • 42.
  • 43.
  • 44.
  • 45.
  • 46.
  • 47.
  • 48.
  • 49.
  • 50.
  • 51.
  • 52.
  • 53.
  • 54.
  • 55.
  • 56.
  • 57.
  • 58.
  • 59.
  • 60.
  • 61.
  • 62.
  • 63.
  • 64.
  • 65.
  • 66.
  • 67.
  • 68.
  • 69.
  • 70.
  • 71.
  • 72.
  • 73.
  • 74.
  • 75.
  • 76.
  • 77.
  • 78.
  • 79.
  • 80.
  • 81.
  • 82.
  • 83.
  • 84.
  • 85.
  • 86.
  • 87.
  • 88.
  • 89.
  • 90.
  • 91.
  • 92.
  • 93.
  • 94.
  • 95.
  • 96.
  • 97.
  • 98.
  • 99.
  • 100.
  • 101.
  • 102.
  • 103.
  • 104.
  • 105.
  • 106.
  • 107.
  • 108.
  • 109.
  • 110.
  • 111.
  • 112.
  • 113.
  • 114.
  • 115.
  • 116.
  • 117.
  • 118.
  • 119.
  • 120.
  • 121.
  • 122.
  • 123.
  • 124.
  • 125.
  • 126.
  • 127.
  • 128.
  • 129.
  • 130.
  • 131.
  • 132.
  • 133.
  • 134.
  • 135.
  • 136.
  • 137.
  • 138.
  • 139.
  • 140.
  • 141.
  • 142.
  • 143.
  • 144.
  • 145.
  • 146.
  • 147.
  • 148.
  • 149.
  • 150.
  • 151.
  • 152.
  • 153.
  • 154.
  • 155.
  • 156.
  • 157.
  • 158.
  • 159.
  • 160.
  • 161.
  • 162.
  • 163.
  • 164.
  • 165.
  • 166.
  • 167.
  • 168.
  • 169.
  • 170.
  • 171.
  • 172.
  • 173.
  • 174.
  • 175.
  • 176.
  • 177.
  • 178.
  • 179.
  • 180.
  • 181.
  • 182.
  • 183.
  • 184.
  • 185.
  • 186.
6. 数据文件: 文件内为虚拟数据，仅为展示效果
  1. getLeftMenu.json 左侧菜单数据
{
  "list": [
    {
      "id": 1,
      "name": "苏州**交易市场",
      "businessScope": "各种新鲜水果，如苹果、香蕉、橙子、梨、桃、葡萄等销售",
      "photo": "https://inews.gtimg.com/om_bt/OP0mBSVgib26rrdC7oEbQWPeeAcQzNydGaqw6REufiCXcAA/641",
      "province": "320000",
      "city": "320500",
      "stockNum": 7,
      "supplyNum": 28,
      "link": "#",
      "longitude": "120.448306",
      "latitude": "31.433461"
    },
    {
      "id": 2,
      "name": "上海**水果交易中心",
      "businessScope": " ",
      "photo": "https://inews.gtimg.com/om_bt/O5zWPSXGHr-o-U1vUxCw8AJ7onRB6wNsX9Qi82hPbTGDoAA/1000",
      "province": "310000",
      "city": "310100",
      "stockNum": 3,
      "supplyNum": 0,
      "link": "#",
      "longitude": "121.311438",
      "latitude": "31.032425"
    },
    {
      "id": 3,
      "name": "河北**水果商圈",
      "businessScope": "水果销售、水果礼盒、水果批发、水果配送、水果加工、水果咨询服务、代客挑选水果等",
      "photo": "https://imgservice.suning.cn/uimg1/b2c/image/Wgur-Xf1xyKN3mwAnWLC0Q.jpg_800w_800h_4e",
      "province": "130000",
      "city": "130300",
      "stockNum": 4,
      "supplyNum": 57,
      "link": "#",
      "longitude": "119.604368",
      "latitude": "39.945462"
    },
    {
      "id": 4,
      "name": "苏州**市场",
      "businessScope": "水果咨询服务、代客挑选水果",
      "photo": "https://inews.gtimg.com/om_bt/OY7EgDCa_kppQRisS50oOP_N-sLr0eCG7XByq1ju_altsAA/1000",
      "province": "320000",
      "city": "320500",
      "stockNum": 10,
      "supplyNum": 154,
      "link": "#",
      "longitude": "120.442089",
      "latitude": "31.440047"
    },
    {
      "id": 5,
      "name": "**水果加工市场",
      "businessScope": "制作果汁、果酱、果干等，以满足不同消费者的需求",
      "photo": "https://www.miao-an.com/img/cooperate11.da46bd23.jpg",
      "province": "420000",
      "city": "420100",
      "stockNum": 5,
      "supplyNum": 4,
      "link": "#",
      "longitude": "114.303476",
      "latitude": "30.503601"
    },
    {
      "id": 6,
      "name": "衡水故城县**水果批发市场",
      "businessScope": "提供配送服务，将水果送至客户指定的地点",
      "photo": "https://q9.itc.cn/images01/20240228/3796398619454ec9ad65c0fb33e7363c.jpeg",
      "province": "130000",
      "city": "131100",
      "stockNum": 4,
      "supplyNum": 0,
      "link": "#",
      "longitude": "115.879459",
      "latitude": "37.164535"
    },
    {
      "id": 7,
      "name": "山东临沂华东**水果城",
      "businessScope": "各种水果销售",
      "photo": "https://img2.baidu.com/it/u=2811054594,2149935890&fm=253&fmt=auto&app=120&f=JPEG?w=545&h=500",
      "province": "370000",
      "city": "371300",
      "stockNum": 7,
      "supplyNum": 1,
      "link": "#",
      "longitude": "118.343533",
      "latitude": "35.142088"
    },
    {
      "id": 8,
      "name": "郑州市**水果交易市场 ",
      "businessScope": "水果批发业务，将水果销售给其他商家或餐厅",
      "photo": "https://q6.itc.cn/q_70/images03/20240310/7deaeb3405944bf69773002b8e3af4e7.jpeg",
      "province": "410000",
      "city": "410100",
      "stockNum": 0,
      "supplyNum": 0,
      "link": "#",
      "longitude": "113.698629",
      "latitude": "34.702777"
    },
    {
      "id": 9,
      "name": "**水果礼盒市场",
      "businessScope": "为了满足送礼需求，水果店可以将水果搭配成精美的礼盒，并在礼盒上印制祝福语",
      "photo": "https://ww4.sinaimg.cn/mw690/68d8c97fgy1hr8jw3x753j20ku0rs7an.jpg",
      "province": "210000",
      "city": "210100",
      "stockNum": 0,
      "supplyNum": 0,
      "link": "#",
      "longitude": "123.347174",
      "latitude": "41.843021"
    },
    {
      "id": 10,
      "name": "辽宁**水果基地",
      "businessScope": "水果销售：这是水果店最主要的经营范围，包括各种新鲜水果，如苹果、香蕉、橙子、梨、桃、葡萄等。水果店应该保证水果新鲜、品质优良，以满足消费者的需求",
      "photo": "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimage109.360doc.com%2FDownloadImg%2F2024%2F03%2F2010%2F281210346_4_20240320101958209.jpeg&refer=http%3A%2F%2Fimage109.360doc.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1731310501&t=aa98bd64ce1b04be69c987fe92037097",
      "province": "130000",
      "city": "130100",
      "stockNum": 0,
      "supplyNum": 0,
      "link": "#",
      "longitude": "114.501084",
      "latitude": "38.055933"
    },
    {
      "id": 11,
      "name": "**水果市场",
      "businessScope": "各种水果销售",
      "photo": "",
      "province": "120000",
      "city": "120100",
      "stockNum": 10,
      "supplyNum": 20,
      "link": "#",
      "longitude": "117.333198",
      "latitude": "39.094294"
    },
    {
      "id": 12,
      "name": "兰州**水果专业市场",
      "businessScope": "种植水果，如草莓、蓝莓等",
      "photo": "https://inews.gtimg.com/om_bt/OSTnVUPg6ncorDwbP4zqi017K1aViojDpPFJJ3Y1x8eEIAA/1000",
      "province": "620000",
      "city": "620100",
      "stockNum": 120,
      "supplyNum": 103,
      "link": "#",
      "longitude": "103.776014",
      "latitude": "36.074689"
    },
    {
      "id": 13,
      "name": "汉中**交易市场",
      "businessScope": "在销售水果的基础上，提供送货上门服务等配送服务",
      "photo": "https://img0.baidu.com/it/u=904203784,1480640225&fm=253&fmt=auto&app=120&f=JPEG?w=750&h=500",
      "province": "610000",
      "city": "610700",
      "stockNum": 0,
      "supplyNum": 4,
      "link": "#",
      "longitude": "107.019721",
      "latitude": "33.112655"
    },
    {
      "id": 14,
      "name": "广东**水果市场",
      "businessScope": "各种新鲜水果，如苹果、梨、草莓、香蕉等销售",
      "photo": "https://copyright.bdstatic.com/vcg/creative/3d3ed3cdbdbca952c43f44a51bc80d20.jpg",
      "province": "440000",
      "city": "440300",
      "stockNum": 0,
      "supplyNum": 1,
      "link": "#",
      "longitude": "113.90666",
      "latitude": "22.566552"
    },
    {
      "id": 15,
      "name": "红宇**水果有限公司",
      "businessScope": "水果销售、水果配送、水果种植等方面",
      "photo": "https://inews.gtimg.com/om_bt/On_IyOQaQwcp76QPnLQJZu67XFp43B6ijaLYxLB-BaMtUAA/1000",
      "province": "440000",
      "city": "441900",
      "stockNum": 0,
      "supplyNum": 0,
      "link": "#",
      "longitude": "113.840617",
      "latitude": "22.882198"
    }
  ]
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41.
  • 42.
  • 43.
  • 44.
  • 45.
  • 46.
  • 47.
  • 48.
  • 49.
  • 50.
  • 51.
  • 52.
  • 53.
  • 54.
  • 55.
  • 56.
  • 57.
  • 58.
  • 59.
  • 60.
  • 61.
  • 62.
  • 63.
  • 64.
  • 65.
  • 66.
  • 67.
  • 68.
  • 69.
  • 70.
  • 71.
  • 72.
  • 73.
  • 74.
  • 75.
  • 76.
  • 77.
  • 78.
  • 79.
  • 80.
  • 81.
  • 82.
  • 83.
  • 84.
  • 85.
  • 86.
  • 87.
  • 88.
  • 89.
  • 90.
  • 91.
  • 92.
  • 93.
  • 94.
  • 95.
  • 96.
  • 97.
  • 98.
  • 99.
  • 100.
  • 101.
  • 102.
  • 103.
  • 104.
  • 105.
  • 106.
  • 107.
  • 108.
  • 109.
  • 110.
  • 111.
  • 112.
  • 113.
  • 114.
  • 115.
  • 116.
  • 117.
  • 118.
  • 119.
  • 120.
  • 121.
  • 122.
  • 123.
  • 124.
  • 125.
  • 126.
  • 127.
  • 128.
  • 129.
  • 130.
  • 131.
  • 132.
  • 133.
  • 134.
  • 135.
  • 136.
  • 137.
  • 138.
  • 139.
  • 140.
  • 141.
  • 142.
  • 143.
  • 144.
  • 145.
  • 146.
  • 147.
  • 148.
  • 149.
  • 150.
  • 151.
  • 152.
  • 153.
  • 154.
  • 155.
  • 156.
  • 157.
  • 158.
  • 159.
  • 160.
  • 161.
  • 162.
  • 163.
  • 164.
  • 165.
  • 166.
  • 167.
  • 168.
  • 169.
  • 170.
  • 171.
  • 172.
  • 173.
  • 174.
  • 175.
  • 176.
  • 177.
  • 178.
  • 179.
  • 180.
  • 181.
  • 182.
  • 183.
  • 184.
  • 185.
  • 186.
  • 187.
  • 188.
  • 189.
  • 190.
  • 191.
  • 192.
  • 193.
  • 194.
  • 195.
  • 196.
  • 197.
  • 198.
  • 199.
  1. getProvinceClass.json 获取省code数据
{
  "list": [
    {
      "province_code": "110000"
    },
    {
      "province_code": "120000"
    },
    {
      "province_code": "130000"
    },
    {
      "province_code": "140000"
    },
    {
      "province_code": "150000"
    },
    {
      "province_code": "210000"
    },
    {
      "province_code": "220000"
    },
    {
      "province_code": "230000"
    },
    {
      "province_code": "310000"
    },
    {
      "province_code": "320000"
    },
    {
      "province_code": "330000"
    },
    {
      "province_code": "340000"
    },
    {
      "province_code": "350000"
    },
    {
      "province_code": "360000"
    },
    {
      "province_code": "370000"
    },
    {
      "province_code": "410000"
    },
    {
      "province_code": "420000"
    },
    {
      "province_code": "430000"
    },
    {
      "province_code": "440000"
    },
    {
      "province_code": "450000"
    },
    {
      "province_code": "500000"
    },
    {
      "province_code": "510000"
    },
    {
      "province_code": "520000"
    },
    {
      "province_code": "530000"
    },
    {
      "province_code": "610000"
    },
    {
      "province_code": "620000"
    },
    {
      "province_code": "630000"
    },
    {
      "province_code": "640000"
    },
    {
      "province_code": "650000"
    },
    {
      "province_code": "810000"
    }
  ]
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41.
  • 42.
  • 43.
  • 44.
  • 45.
  • 46.
  • 47.
  • 48.
  • 49.
  • 50.
  • 51.
  • 52.
  • 53.
  • 54.
  • 55.
  • 56.
  • 57.
  • 58.
  • 59.
  • 60.
  • 61.
  • 62.
  • 63.
  • 64.
  • 65.
  • 66.
  • 67.
  • 68.
  • 69.
  • 70.
  • 71.
  • 72.
  • 73.
  • 74.
  • 75.
  • 76.
  • 77.
  • 78.
  • 79.
  • 80.
  • 81.
  • 82.
  • 83.
  • 84.
  • 85.
  • 86.
  • 87.
  • 88.
  • 89.
  • 90.
  • 91.
  • 92.
  • 93.
  • 94.
  1. getProvinceInfo.json 省份信息弹窗数据
{
  "data": {
    "count": 82,
    "domContent": "<li><a rel="nofollow" href=\"javascript:void(0);\" onclick=\"drawProvinceDistribute('130000');\">苹果</a></li>"
  }
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
7. 备注：页面UI色值参考 TinyVue