DingdongRider/map/Heat3DScreen.tsx

import * as WebBrowser from 'expo-web-browser';
import * as React from 'react';
import { StatusBar } from 'expo-status-bar';
import { Div, Button } from 'react-native-magnus';
import { Appbar } from 'react-native-paper';
import { WebView } from 'react-native-webview';
import { useTranslation } from 'react-i18next';

import useModel from 'flooks';
import { useRequest } from 'ahooks';
import MapModel from './model';
import {
  toastShow,
  toastHide,
  toastInfo,
  toastSuccess,
} from '../utils/SystemUtils';

export default function SearchMapScreen() {
  const { t } = useTranslation();

  const webRef = React.useRef();
  const { getNowLocation } = useModel(MapModel);
  const { run } = useRequest(
    (location) =>
      `/merchant/heatMap?longitude=${location.lng}&latitude=${location.lat}`,
    {
      manual: true,
    }
  );

  return (
    <>
      <WebView
        ref={webRef}
        source={{
          uri: `http://dingdong.izouma.com/map/heat3D`,
        }}
        style={{ flexGrow: 1, width: '100%' }}
        onMessage={({ nativeEvent }) => {
          console.log(nativeEvent);
        }}
        onLoadEnd={() => {
          getNowLocation().then((res) => {
            const { location } = res;
            run(location).then((res) => {
              var list = res.map((item) => {
                return {
                  count: item.count,
                  lng: item.longitude,
                  lat: item.latitude,
                };
              });
              webRef.current.injectJavaScript(
                `window.draw(${JSON.stringify(list)},'${JSON.stringify(
                  location
                )}')`
              );
            });
          });
        }}
      />
    </>
  );
}