Dingdong_client/screens/Map/MapMarkImg.jsx

import * as WebBrowser from 'expo-web-browser';
import * as React from 'react';
import { Div, Image, Text } from 'react-native-magnus';
import useModel from 'flooks';
import { useRequest, useCreation } from '@umijs/hooks';
import MapModel from './model'; // detail模块通用方法

export default function MapMarkImg({ imgType, info, label }) {
  const { personImg, merchatImg, riderImg } = useModel(MapModel, []);

  const { merLocation, location, merShowName, riderLocation } = info;
  const merLocations = merLocation ? merLocation.split(',') : [];
  const locations = location ? location.split(',') : [];
  const ridLocations = riderLocation ? riderLocation.split(',') : [];
  const persoMark =
    locations.length > 0
      ? `markers=icon:${personImg}%7C${locations[1]},${locations[0]}`
      : '';
  const merchatMark =
    merLocation.length > 0
      ? `markers=icon:${merchatImg}%7C${merLocations[1]},${merLocations[0]}`
      : '';
  const riderMark =
    ridLocations.length > 0
      ? `markers=icon:${riderImg}%7C${ridLocations[1]},${ridLocations[0]}`
      : '';

  const markers = useCreation(() => {
    const str = '';
    let list = [];
    switch (imgType) {
      case 'rider':
        list.push(riderMark);
        list.push(merchatMark);
        list.push(persoMark);
        break;
      case 'merchant':
        list.push(merchatMark);
        list.push(riderMark);
        list.push(persoMark);
        break;
      default:
        list.push(persoMark);
        list.push(riderMark);
        list.push(merchatMark);
        break;
    }
    list = list.filter((item) => {
      return !!item;
    });

    return list.length > 0 ? `&${list.join('&')}` : str;
  }, [persoMark, merchatMark, riderMark, info, imgType]);

  const center = useCreation(() => {
    let str = '';
    switch (imgType) {
      case 'rider':
        str = '31.982155,118.734716';
        break;
      case 'merchant':
        str = `${merLocations[1]},${merLocations[0]}`;
        break;
      default:
        str = `${merLocations[1]},${merLocations[0]}`;
        break;
    }

    return str;
  }, [persoMark, merchatMark, riderMark, info, imgType]);

  return (
    <>
      <Div>
        {imgType != null && (
          <>
            <Div
              position="absolute"
              left={0}
              right={0}
              top={10}
              zIndex={2}
              row
              justifyContent="center"
            >
              <Text bg="brand500" color="white" px={10} py={5} rounded="sm">
                {label}
              </Text>
            </Div>
            <Image
              zIndex={1}
              h={200}
              source={{
                uri: `https://apis.map.qq.com/ws/staticmap/v2/?center=${center}&zoom=18&size=939*600&maptype=roadmap${markers}&key=GLFBZ-ZR2W6-76XSA-MF7CQ-GDJ6Z-6FB5K`,
              }}
            />
          </>
        )}
      </Div>
    </>
  );
}