Dingdong_client/screens/Map/MapMarkScreen.jsx

import * as WebBrowser from 'expo-web-browser';
import * as React from 'react';
import { StatusBar } from 'expo-status-bar';
import {
  Div,
  Button,
  Image,
  Text,
  Avatar,
  Icon,
  Input,
} from 'react-native-magnus';
import { Appbar } from 'react-native-paper';
import { ScrollView } from 'react-native-gesture-handler';
import { WebView } from 'react-native-webview';

import useModel from 'flooks';
import MapModel from './model'; // detail模块通用方法

import Header from '../../components/Header';

import { alert } from '../../Utils/TotastUtils';

export default function MapMarkScreen() {
  const { personImg, merchatImg, riderImg } = useModel(MapModel, []);
  return (
    <>
      <Div bg="white">
        <Image
          h={200}
          source={{
            uri: `https://apis.map.qq.com/ws/staticmap/v2/?center=31.981746,118.734661&zoom=18&size=939*600&maptype=roadmap&markers=icon:${personImg}%7C31.981746,118.734661&markers=icon:${merchatImg}%7C31.982155,118.734716&markers=icon:${riderImg}%7C31.981746,118.734661&key=GLFBZ-ZR2W6-76XSA-MF7CQ-GDJ6Z-6FB5K`,
          }}
        />
      </Div>
    </>
  );
}