在我的 React 应用程序中，我正在使用yandex 地图插件，并且我正在尝试制作自定义提示内容。基本上我遵循以下两个示例：
我的代码如下所示：
//placemark
const { hintLayout } = this.state;
<Placemark
//instanceRef={ref => { this.ref = ref; }}
key={'placemark#' + index}
geometry={coordinate.coord}
objectId={coordinate.id}
properties={{
objectId: coordinate.id,
hintContent:hintLayout
}}
options={{
iconLayout: 'default#image',
iconImageHref: require('../../../image/assets/maps/images/' + (coordinate.icon)),
iconImageSize: (clicked_placemark_id == coordinate.id?[iconSize_big, iconSize_big]: [iconSize, iconSize]),
iconImageOffset: [-5, -38],
hintOpenTimeout: 100, //default=150
hintCloseTimeout: 1 //default=700
}}
modules={
['geoObject.addon.balloon', 'geoObject.addon.hint']
}
onClick={this.onPlacemarkClick.bind(this)}
/>
//create hint layout
function createHintLayout(ymaps) {
// https://tech.yandex.com/maps/jsbox/2.1/zoom_layout
let HintLayout = ymaps.templateLayoutFactory.createClass( "<div class='my-hint'>" +
"<b>SomeObject</b><br />" +
"SomeAddress" +
"</div>", {
/**
* Defining the getShape method,
* which will return the size of the hint layout.
* This is necessary in order for the hint to automatically
* move its position when going off the map.
*/
getShape: function () {
var el = this.getElement(),
result = null;
if (el) {
var firstChild = el.firstChild;
result = new ymaps.shape.Rectangle(
new ymaps.geometry.pixel.Rectangle([
[0, 0],
[firstChild.offsetWidth, firstChild.offsetHeight]
])
);
}
return result;
}
}
);
return HintLayout;
}
//handle api
handleApiAvaliable(ymaps) {
ymaps.ready(() => {
this.setState({ hintLayout : layout });
});
}
因此，我可以在地图上绘制地标，但是当我将鼠标悬停在其上时，我得到以下信息：
欢迎任何如何解决它的想法。谢谢你。