Yahoo! JavaScriptマップAPIでマーカーが表示されない

 Yahoo! JavaScriptマップAPIでマーカーが表示されない、という事象に出会いました。
 マーカーがすべて表示されない、というならわかりやすいのですが、特定のパターンでのみ表示されません。
 対象となっているウェブサービスでは、

①ユーザー操作によるリクエストに応じてマーカー表示
②予めhtml中にjson文字列でマーカー情報を持っていて表示

 のパターンがあるのですが、②のケースのみ表示されません。それも②で多数のマーカーが表示されるケースでは問題なく、一つのみの場合で表示されないケースが発生します(二つ三つ程度というのは試していません)。
 一度表示されないとそのページで①の操作を行っても、最初に表示されなかった種類のマーカー画像は表示されません(他のマーカーは表示される)。
 さらにスマホから確認すると、問題なく表示されています。
 PCからでもハード再読込を何度も試行すると表示されるケースがあります。

 つまり非常に不安定で厄介な不具合なのですが、感触からいって「マーカーを表示するのが早すぎて表示されない」のではないか、という感じがしました。沢山表示する時は手間がかかってそのタイムラグによって救われているのではないか、と。物凄い大雑把な話ですが。
 要するに地図描画が完了してからマーカーを置いていないのがいけないのではないか?ということです。
 一度失敗してその後表示されないのは、yMapが何らかの形でマーカー画像をキャッシュしていて、最初にコケるとその後も読み込まないのでは?と推測できます。

 というわけで、yMapのloadイベントにマーカー追加ロジックを入れるよう変更。

yMap.bind(‘load’,function(){ //マーカー追加 });

 的な感じですね。
 ところがコレもダメ。
 うーんと唸って、試しに初期画面でjson文字列から追加するときはsetTimeoutで1秒ほど待ってから追加することにしてみると、見事表示されました。何度か様々なパターンで試行してもうまく行っているので、とりあえずはこれでしのげそうです。
 loadイベントにbindしてダメで、1秒待つというまったく大雑把で確証のない方法で上手くいっているのは釈然としないし、全く良い解決法ではないので他の解法が見つかれば変更したいのですが、ご参考までに。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする