0

React アプリでyandex マッププラグインを使用しており、カスタム ヒント コンテンツを作成しようとしています。基本的に私は次の2つの例に従っています:

zoomControl目印のヒントを追加する

私のコードは次のようになります。

//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 });
    });

}

そのため、地図上に目印を描くことができますが、その上にカーソルを合わせると、次のようになります。

目印のホバー写真

それを修正する方法についてのアイデアは大歓迎です。ありがとうございました。

4

1 に答える 1