问题描述
能否请您告诉我是否可以在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;
感谢您的关注!
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)