pnpm add leaflet leaflet.chinatmsproviders

import icon from '@/assets/morning-meeting.png';
import { BfMap } from '@bud-fe/react-taro-ui';
import { Button, View } from '@tarojs/components';
import React, { useState } from 'react';

export default () => {
  const [latLng, setLatLng] = useState<{ lat: number; lng: number }>({ lat: 31.232454, lng: 121.476607 });

  return (
    <View>
      <BfMap
        // showLocation
        style={{ height: 500 }}
        latitude={latLng.lat}
        longitude={latLng.lng}
        scale={16}
        markers={[
          {
            latitude: 31.232454,
            longitude: 121.476607,
            id: '来福士',
            title: '来福士',
            width: 40,
            height: 40,
            iconPath: icon,
            anchor: { x: 0.5, y: 0.5 },
          },
          { latitude: 31.228234, longitude: 121.475497, id: '上海博物馆', title: '上海博物馆' },
        ]}
        polyline={[
          {
            points: [
              { latitude: 31.235099, longitude: 121.473697 },
              { latitude: 31.234304, longitude: 121.475752 },
              { latitude: 31.232135, longitude: 121.473115 },
              { latitude: 31.232432, longitude: 121.476671 },
            ],
            color: '#B93633',
            width: 4,
            opacity: 0.8,
          },
        ]}
        onMarkerTap={(e) => {
          console.log('onMarkerTap', e);
        }}
        onCalloutTap={(e) => {
          console.log('onCalloutTap', e);
        }}
        onRegionChange={(e) => {
          console.log('onRegionChange', e);
        }}
      />
      <Button
        onClick={() => {
          setLatLng({ lat: 31.232454, lng: 121.476607 });
        }}
      >
        move to 来福士广场
      </Button>
      <Button
        onClick={() => {
          setLatLng({ lat: 31.228234, lng: 121.475497 });
        }}
      >
        move to 上海博物馆
      </Button>
    </View>
  );
};