YahooMap apiでlabelを表示させたい

Question

実現したいこと

1. (自己解決) yahoo map apiを使用して、map上にmarkerを設置
2. markerをクリックした時にlabelを表示

前提

• @shops = Shop.where("address like ?", "%#{検索ワード}%")
• marker: 地図上のピン
• label: markerをクリックした時にポップアップされる情報（今回は店名）

試してうまくいかなかったコード

1. labelの位置がずれる

1のmarker設置まではできました。
2のlabel表示まではできましたが、labelの位置がmarkerの場所からずれており、別の場所のmarkerをクリックしても同一箇所にmarkerが上書きされてしまいます。

例えば、以下で左上のmarkerをクリックしても、labelの位置が駅に表示されてしまいます。また、別のmarkerをクリックしても、同じ場所にlabelが表示されます。

  <script>
    var ymap = new Y.map({...});
    var markers = [];

    <% if @shops.present? %>
      <% @shops.each do |shop| %>
        var latLng = new Y.LatLng(<%= shop.lat %>, <%= shop.lng %>);
        var marker = new Y.Marker(latLng);

        marker.bind("click", function() {
          var label = new Y.Label(latLng, "<%= shop.name %>");
          ymap.addFeature(label);
        })
        markers.push(marker);
      <% end %>

      ymap.addFeatures(markers);
      ymap.drawMap(new Y.LatLng(<%= @shops.first.lat %>, <%= @shops.first.lng %>), 16);
    <% end %>
  </script>

Answer 1

当該APIは2020年10月31日（土） に終了するようです。

【【重要】 YOLP Web APIにおける一部API・SDKの提供終了お知らせ - Yahoo! Open Local Platform (YOLP)】
https://map.yahoo.co.jp/promo/yolp/close_information.html

---

マーカーから噴出しを出すのはラベルではなく marker.bindInfoWindow のようです。

【Yahoo!地図APIでマーカーをクリックすると吹きだしを出す方法】
http://www.hanemaru.com/itemcolumn/11yolp003.html

ラベルの位置を無理やり動かすならoffsetを指定することもできるようです。

【YOLP(地図):Featureクラス - Yahoo!デベロッパーネットワーク】
https://developer.yahoo.co.jp/webapi/map/openlocalplatform/v1/js/reference/YFeature.html#Label

Comments

[aaas]

わざわざ調べていただき、ありがとうございました。