1

您能否告诉我是否可以使用您自己的图像在 React Yandex Maps 的地图上进行标记？现在我正在使用 Circle 接收坐标。如何使用宽度和高度为 25 像素的图像来代替？以下是我的地图代码：

import React, { Fragment } from 'react';
import { Col, Row } from 'antd';
import { YMaps, Map, Circle, Placemark } from 'react-yandex-maps';
import { useQuery } from 'urql';
import fap from '../../src/img/fap.png';
// import ItemContent from '../components/ItemContent';

function Monitoring(props) {
  const [res, executeQuery] = useQuery({
    query: `
      query {
        items {
          _id
          name
          coordx
          coordy
        }
      }
    `,
  });
  if (res.fetching) return <p>Loading...</p>;
  if (res.error) return <p>Errored!</p>;
  const { items } = res.data;
  return (
    <Fragment>
      <Row>
        <Col span={15}>
          <div id="Map_Container">
            <YMaps>
              <Map
                id='map'
                defaultState={{ center: [43.00, 40.97], zoom: 9 }}
                height={700}
                width={'100%'}
              >
                <h3 className='content-title'>Мониторинг на карте</h3>
                {items.map(item => (
                  <Circle
                    geometry={[[item.coordx, item.coordy], 1500]}
                    options={{
                      draggable: true,
                      fillColor: '#DB709377',
                      strokeColor: '#990066',
                      strokeOpacity: 0.8,
                      strokeWidth: 1,
                    }}
                    // onClick={e => console.log(e.get('coords'))}
                    // onClick={() => setId(item._id)}
                  />
                ))}
              </Map>
            </YMaps>
          </div>
        </Col>
        <Col span={8} offset={1}>
          {/* <ItemContent _id={itemId} /> */}
        </Col>
      </Row>
      <div className="content">
        <h3 className="content-title">Инструкция по мониторингу</h3>
        <div className="content-data">
          <p>Объекты мониторинга представлены на карте. Для получения информации по каждому из них кликните по кружочку, и после этого информация в колонке справа обновится.</p>
          <img src={fap} alt=""/>
        </div>
      </div>
    </Fragment>
  );
}

export default Monitoring;

感谢您的关注！

4

1 回答 1

0

例子：

import placemarkIcon from 'assets/your_icon.png';
<Placemark options={{
  iconLayout: "default#image",
  iconImageHref: placemarkIcon,
  iconImageSize: [32, 32],
 }}/>
于 2022-03-04T08:12:04.413 回答