YOLP オリジナルアイコンを表示したい!


yahoo!japan の apiを利用して地図を表示させました。

でも、これからいろいろな地点を登録したいので
色分けがしたい・・・。

ということでオリジナルアイコンを作成して表示させてみました。
ちなみにアイコンの大きさは縦30px,横20px程度の大きさで、png拡張子にしています。

コードの抜粋はこれです↓
var icon_blue = new Y.Icon('images/pin_blue.png');
var icon_orange = new Y.Icon('images/pin_orange.png');
var icon_green = new Y.Icon('images/pin_green.png');
var markers = [];
markers.push(new Y.Marker(new Y.LatLng(35.061857, 134.005605),{icon: icon_blue},{title:"鶴山公園"}));
markers.push(new Y.Marker(new Y.LatLng(35.071702, 134.006139),{icon: icon_orange},{title:"衆楽園"}));
markers.push(new Y.Marker(new Y.LatLng(34.668521, 133.935759),{icon: icon_green},{title:"後楽園"}));

青いアイコンとオレンジのアイコンと緑のアイコンの3つを作成し
3つの地点でそれぞれの位置に表示をしました。

メモメモ(・-)ヾ


みんなのノート岡山さん
 投稿日:2019-02-12 00:04:33 表示回数:9701回 good:155回
YOLP,オリジナルアイコン,yahoo!japan,api


ページのトップへ戻る