Javascript 如何在React Yandex地图中为placemarcs使用图像?
您能告诉我是否可以在React Yandex地图中使用您自己的图像在地图上进行标记吗?现在我用的是接收坐标的圆。如何使用宽度和高度均为25像素的图像?以下是我的地图代码:Javascript 如何在React Yandex地图中为placemarcs使用图像?,javascript,reactjs,yandex,yandex-maps,yandex-api,Javascript,Reactjs,Yandex,Yandex Maps,Yandex Api,您能告诉我是否可以在React Yandex地图中使用您自己的图像在地图上进行标记吗?现在我用的是接收坐标的圆。如何使用宽度和高度均为25像素的图像?以下是我的地图代码: import React, { Fragment } from 'react'; import { Col, Row } from 'antd'; import { YMaps, Map, Circle, Placemark } from 'react-yandex-maps'; import { useQuery } fro
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;
import React,{Fragment}来自'React';
从“antd”导入{Col,Row};
从'react yandex maps'导入{YMaps,Map,Circle,Placemark};
从“urql”导入{useQuery};
从“../../src/img/fap.png”导入fap;
//从“../components/ItemContent”导入ItemContent;
功能监控(props){
const[res,executeQuery]=useQuery({
查询:`
质疑{
项目{
_身份证
名称
库德克斯
协调的
}
}
`,
});
如果(res.fetching)返回加载…;
如果(res.error)返回错误!;
常量{items}=res.data;
返回(
Мониторинг на карте
{items.map(item=>(
console.log(e.get('coords'))}
//onClick={()=>setId(item.\u id)}
/>
))}
{/* */}
Инструкция по мониторингу
бббббббббб。ббббббббббб,б1101;б
);
}
出口违约监控;
谢谢大家的关注