如何在 React Yandex 地图中使用图像作为地标？

Posted 2023-03-25

【中文标题】如何在 React Yandex 地图中使用图像作为地标？

【英文标题】：How to use an image for a placemarcs in React Yandex Maps?

【发布时间】：2020-10-08 10:48:07

【问题描述】：

您能否告诉我是否可以使用您自己的图像在 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 />
        </div>
      </div>
    </Fragment>
  );


export default Monitoring;

感谢您的关注！

【参考方案1】：

示例：

import placemarkIcon from 'assets/your_icon.png';
<Placemark options=
  iconLayout: "default#image",
  iconImageHref: placemarkIcon,
  iconImageSize: [32, 32],
 />