umi+dva+hooks+高德地图的三级区域至店铺的地图切换及搜索组件

最新推荐文章于 2023-07-03 10:15:57 发布

青崖客

最新推荐文章于 2023-07-03 10:15:57 发布

阅读量907

点赞数

文章标签： react js

本文链接：https://blog.csdn.net/weixin_43831820/article/details/108262485

版权

1、创建react项目

![在这里插入图片描述](https://img-blog.csdnimg.cn/20200827155141315.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzgzMTgyMA==,size_16,color_FFFFFF,t_70#pic_center

umi具有移动端高清适配等插件，在做移动端项目的时候可以省很多事，项目创建好了以后运行起来
在这里插入图片描述

2、安装antd-mobild(搜索框组件)

npm install antd-mobile --save

ant的样式需要在.umirc.js里添加依赖
在这里插入图片描述

3、项目引入高德地图

在项目src/page下创建html模板文件document.ejs，并引入高德地图的js
在这里插入图片描述
这里的key需要从高德地图api里创建应用然后在这里替换掉就可以用了，然后在.umirc.js里引入添加外部依赖，这样就可以在应用中import导入使用了

4、开始编写代码
这里的实现思路是根据树形结构的数据实现进入下级返回上级，区分区域和店铺等等。
在这里插入图片描述

在副作用中初始化高德地图至state中，接着fetch树形结构的数据，因为一级区域进入默认选择，所以这里直接渲染第二级区域的点
在这里插入图片描述

  const renderCircle = useCallback(zones => {
    map.clearMap();
    zones && zones.forEach(item => {
      map.add(new AMap.Circle({
        center: new AMap.LngLat(item.longitude, item.latitude), // 圆心位置
        radius: 150000,  //半径
        strokeColor: '#b9a27c',  //线颜色
        strokeOpacity: 0.9,  //线透明度
        strokeWeight: 3,  //线粗细度
        fillColor: '#b9a27c',  //填充颜色
        fillOpacity: 0.7, //填充透明度
        id: item.id,
        parentId: item.parentId || null,
        name: item.name,
        type: item.type,
      }).on('click', (e) => {
        const pointObj = getMapPointTypeAndId(e.target);
        const selected = searchSelected(mapData, pointObj && pointObj.type, pointObj && pointObj.id);
        dispatch({
          type: 'map/save',
          payload: {
            zoneId: pointObj && pointObj.id,
          },
        });
        if (selected && selected.children && selected.children.length) {
          if (selected.children[0].type === 'shop') {
            renderShop(selected.children);
            map.setZoomAndCenter(16, [selected.longitude, selected.latitude]);
          } else {
            renderCircle(selected.children);
            map.setCenter([selected.longitude, selected.latitude]);
          }
        }
      }));
      let text = new AMap.Text({
        text: item.name,
        position: new AMap.LngLat(item.longitude, item.latitude),
        anchor: 'bottom-left',
        offset: new AMap.Pixel(10, -10),
      });
      text.setStyle({
        'background-color': 'rgba(0,0,0,0)',
        border: 'none',
        'font-size': '36px',
        'font-family': 'PingFangSC-Medium',
      });
      map.add(text);
    });
  }, [dispatch, map, mapData, renderShop]);

然后根据点击点位事件触发进入下一级的店铺渲染

const renderShop = useCallback(shops => {
    map.clearMap();
    shops && shops.forEach(item => {
      let url = addressIcon;
      map.add(new AMap.Marker({
        icon: new AMap.Icon({
          image: url,
          size: new AMap.Size(120, 120),
          imageSize: new AMap.Size(120, 120),
        }),
        position: [item.longitude, item.latitude],
        id: item.id,
        parentId: item.parentId || null,
        name: item.name,
        type: item.type,
        shopCode: item.shopCode,
      }).on('click', (e) => {
        const pointObj = getMapPointTypeAndId(e.target);
        const selected = searchSelected(mapData, pointObj && pointObj.type, pointObj && pointObj.id);
        dispatch({
          type: 'map/save',
          payload: {
            shopId: pointObj && pointObj.id,
          },
        });
        map.setZoomAndCenter(16, [selected.longitude, selected.latitude]);
      }));
      let text = new AMap.Text({
        text: item.name,
        position: new AMap.LngLat(item.longitude, item.latitude),
        anchor: 'bottom-left',
        offset: new AMap.Pixel(70, -10),
      });
      text.setStyle({
        'background-color': 'rgba(0,0,0,0)',
        border: 'none',
        'font-size': '36px',
        'font-family': 'PingFangSC-Medium',
      });
      map.add(text);
    });
  }, [dispatch, map, mapData]);