リネージュ2のマップを、ブログ記事やHPに簡単に表示できるツールがあれば、世の中なんて便利なことか。
たとえば、その日行った狩場をブログ日記で示したり、ボスやクエストを説明するのにHPに挿入してみたり・・・。
ということで、右にあるような地図ツール(ブログパーツ?)を作っちゃいました。
ちなみこれ、GoogleMapsのようにドラッグしてグリグリ動かせるんですっ!
というか、ただのGoogleMapsです・・・^^; (正確には、GoogleMapsのうえにリネージュ2のマップを貼り付けてるだけです)。
なので、あんまりグリグリ動かすとアメリカ大陸が見えてきます・・・(コロンブスの気分が味わえます。謎)
一週間前の記事にも取り付けてたんですが、IEの方は見れなかったみたいで、この地図のことを記事にするのを控えてました。そして、このほどIEでのエラー(単に文字コードの問題だったみたい・・・)も解決したのでその方法をご紹介しようというわけです。
と、偉そうに言ってますが、ほとんど
ココのパクリです^^;
まず、以下のスクリプトを自分のブログ、またはHPの<Head>~</Head>部分にコピーします。一行目の***********の部分には、自分のGoogleMapsのAPIキーを入力します(APIキーは、
http://www.google.com/apis/maps/の「Sign up for a Google Maps API key」から取得できます)。
<script src="http://maps.google.com/maps?file=api&v=2&key=***********" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
/*貼り付ける地図の位置、大きさ、画像を指定*/
function TestOvy(){
this._x=-140;
this._y=0;
this._w=13.59;
this._h=19.65;
this._src="http://static.lineage2.jp/images/guide/gameinfo/worldmap_img1_pop.jpg";
}
TestOvy.prototype = new GOverlay();
TestOvy.prototype.initialize = function(map) {
var div = document.createElement("img");div.style.backgroundColor = "pink";div.style.position = "absolute";div.src=this._src;
map.getPane(G_MAP_MARKER_PANE).appendChild(div);this._div = div;this._map=map;
}
TestOvy.prototype.redraw = function(force){
if (!force) return;
var m=this._map,z=m.getSize(),s=m.getBounds().toSpan(),p=m.fromLatLngToDivPixel(new GLatLng(this._y,this._x));
this._div.style.width=z.width*(this._w/s.lng())+"px";
this._div.style.height=z.height*(this._h/s.lat())+"px";
this._div.style.left=p.x+"px";
this._div.style.top=p.y+"px";
}
function load() {
if (GBrowserIsCompatible()) {
var objDiv=document.getElementsByTagName('div');
for(i=0; i < objDiv.length; i++){
if(objDiv[i].className.match("lineagemap")){
var mapclass = objDiv[i];
var mapx = mapclass.title.substring(0,mapclass.title.indexOf(",",0));
var mapy = mapclass.title.substring(mapclass.title.indexOf(",",0)+1,mapclass.title.length);
var map = new GMap2(mapclass);
/*表示倍率を指定(map.setCenter(new GLatLng(mapx,mapy), ズームレベル)、ズームレベル:0~17)*/
map.setCenter(new GLatLng(mapx,mapy), 7);
map.addOverlay(new TestOvy());
map.addOverlay(new GMarker(new GLatLng(mapx,mapy)));
GEvent.addListener(map, 'click', function(overlay, point){alert(point);});
}
}
}
}
</script>
つぎにBodyタグに、onload="load()"を挿入してください。
<body onload="load()">
ここまでできたら、あとは地図を挿入したい場所につぎのHTMLを入れてやればOKです。
Class属性"lineagemap"は、このタグにGoogleMapsを挿入することを意味しています(なので削除しないでください^^)。
Title属性には、ピンを打つ位置の座標を入れます(ピンを挿した位置が中心となるように地図が表示されます)。ピンを打ちたい座標を取得するには、地図上で希望の位置をクリックしてやります。すると、アラートで座標が表示されますので、それをコピーすれば簡単です。
地図の大きさはこのタグのStyle属性で決まります(適当にかえちゃってください)。
<div class="lineagemap"
style="margin: 1em; width: 150px; height: 150px;
title="-9.622414142924791, -131.72607421875"></div>
基本的にうえのJavascriptが<Head>~</Head>に入っていれば、あとは座標を指定したHTMLタグを貼り付けるだけで簡単に追加できます。
最初にも言いましたが、GoogleMapsそのものなので、いろいろ便利な使い方ができるかもしれません(クエストのルートを示したり、各場所のいろんな情報を示したり・・・)。
【注意点】
- CSSの設定によっては表示が崩れることあります(最初苦労しました・・・)。
- 表示がちょっとばかし重い感じがします・・・。
- お決まりですが、ウチは基本的にこういったことに関して素人なので、何か問題あってもサポートできません。自己責任でお願いします。
【あとがき】
これまで、ウチのサイトのキラーコンテンツ(かなり大げさw)は、
Movie(動画)の撮り方でしたが、この記事が次のキラーコンテンツになることを期待してます。まぁ、「自分がほしいものは皆もほしい」という短絡的な考え方なんでが^^;
0 Comments Read...
Post a Comment