JA:OpenLayers Marker Example

From OpenStreetMap Wiki
Jump to: navigation, search
利用できる言語 — OpenLayers Marker Example
Afrikaans Alemannisch aragonés asturianu azərbaycanca Bahasa Indonesia Bahasa Melayu Bân-lâm-gú Basa Jawa Baso Minangkabau bosanski brezhoneg català čeština dansk Deutsch eesti English español Esperanto estremeñu euskara français Frysk Gaeilge Gàidhlig galego Hausa hrvatski Igbo interlingua Interlingue isiXhosa isiZulu íslenska italiano Kiswahili Kreyòl ayisyen kréyòl gwadloupéyen kurdî latviešu Lëtzebuergesch lietuvių magyar Malagasy Malti Nederlands Nedersaksies norsk norsk nynorsk occitan Oromoo oʻzbekcha/ўзбекча Plattdüütsch polski português română shqip slovenčina slovenščina Soomaaliga suomi svenska Tiếng Việt Türkçe Vahcuengh vèneto Wolof Yorùbá Zazaki српски / srpski беларуская български қазақша македонски монгол русский тоҷикӣ українська Ελληνικά Հայերեն ქართული नेपाली मराठी हिन्दी অসমীয়া বাংলা ਪੰਜਾਬੀ ગુજરાતી ଓଡ଼ିଆ தமிழ் తెలుగు ಕನ್ನಡ മലയാളം සිංහල ไทย မြန်မာဘာသာ ລາວ ភាសាខ្មែរ ⵜⴰⵎⴰⵣⵉⵖⵜ አማርኛ 한국어 日本語 中文(简体)‎ 吴语 粵語 中文(繁體)‎ ייִדיש עברית اردو العربية پښتو سنڌي فارسی ދިވެހިބަސް
その他の言語このウィキの翻訳を支援してください

これは OpenLayers の地図にマーカーを追加するための簡単な例です。

Example

必要なコードは以下の通りです (以下を新しい HTML ファイルとしてコピーして、ブラウザで表示させます):

<html><body>
  <div id="mapdiv"></div>
  <script src="http://www.openlayers.org/api/OpenLayers.js"></script>
  <script>
    map = new OpenLayers.Map("mapdiv");
    map.addLayer(new OpenLayers.Layer.OSM());

    var lonLat = new OpenLayers.LonLat( -0.1279688 ,51.5077286 )
          .transform(
            new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984
            map.getProjectionObject() // to Spherical Mercator Projection
          );
          
    var zoom=16;

    var markers = new OpenLayers.Layer.Markers( "Markers" );
    map.addLayer(markers);
    
    markers.addMarker(new OpenLayers.Marker(lonLat));
    
    map.setCenter (lonLat, zoom);
  </script>
</body></html>

これはマーカーを置くのと地図をセンタリングするのに同じ lonLat オブジェクトを使っています。 もうひとつの OpenLayers.LonLat オブジェクトとして newLonLat を定義すると、 markers.addMarker(new OpenLayers.Marker(newLonLat)); を使ってさらなるマーカーを追加できます。

iframe を使った手法

<iframe> タグを使って、より単純な HTML の断片にすることもできます。 "Export" タブを使って、"embeddable HTML" オプションを選ぶことで、 必要な HTML を簡単に得られます。 iframe を使った手法はかなり制限されます。 もし追加の javascript の技を試すことに興味があるなら、上述の OpenLayers の例がよりよい開始点です。

See also

OpenLayers Simple Example