OpenLayersを使用してマップにカスタムマーカーを動的に追加する

マップにカスタムマーカーを追加して、各マーカーの説明を追加できるようにしたいと考えています。任意のヒント、チュートリアルへのリンクは本当に便利です。OpenLayersを使用してマップにカスタムマーカーを動的に追加する

2011-01-07 Shreyas

マップ上の「クリック」イベントに関数を登録できます。ユーザーがそれをクリックすると、マークが自動的に追加されます。

はこのような何か試してみてください：

// 'map' is your map created using new OpenLayers.Map(options) 

markers = new OpenLayers.Layer.Markers("Markers"); 
markers.id = "Markers"; 
map.addLayer(markers); 

map.events.register("click", map, function(e) { 
     //var position = this.events.getMousePosition(e); 
     var position = map.getLonLatFromPixel(e.xy); 
     var size = new OpenLayers.Size(21,25); 
    var offset = new OpenLayers.Pixel(-(size.w/2), -size.h); 
    var icon = new OpenLayers.Icon('images/mark.png', size, offset); 
    var markerslayer = map.getLayer('Markers'); 

    markerslayer.addMarker(new OpenLayers.Marker(position,icon)); 

    });

かなりシンプルに、私はあなたがそれを理解できると思います:)

出典

2011-01-17 22:13:59

私は@Franのソリューションを試みたが、それは私のために働くのdidnt。 OpenLayersををクリックして、マーカー位置の緯度と経度保存

場所マーカーを

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml" debug="true"> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> 
    <meta name="apple-mobile-web-app-capable" content="yes"> 
    <title>MousePosition Control</title> 
    <link rel="stylesheet" href="http://openlayers.org/dev/theme/default/style.css" type="text/css"> 
    <link rel="stylesheet" href="http://openlayers.org/dev/examples/style.css" type="text/css"> 
    <script src="../OpenLayers.js"></script> 
    <script type="text/javascript"> 
     var map; 
     function init(){ 
      var map = new OpenLayers.Map('map'); 
      var proj4326 = new OpenLayers.Projection("EPSG:4326"); 
      var projmerc = new OpenLayers.Projection("EPSG:900913"); 
      var layerOSM = new OpenLayers.Layer.OSM("Street Map"); 
      map.addLayers([layerOSM]); 
      if (!map.getCenter()) map.zoomToMaxExtent(); 
      map.events.register("mousemove", map, function(e) { 
       var position = this.events.getMousePosition(e); 
       OpenLayers.Util.getElement("coords").innerHTML = 'MOUSE POSITION '+position; 
       var lonlat = map.getLonLatFromPixel(this.events.getMousePosition(e)); 
       OpenLayers.Util.getElement("lonlatTG").innerHTML = 'lonlat => '+lonlat; 
       var lonlatTransf = lonlat.transform(map.getProjectionObject(), proj4326); 
       OpenLayers.Util.getElement("lonlatTrans").innerHTML = 'lonlatTransf => '+lonlatTransf; 
       OpenLayers.Util.getElement("lonlatDouble").innerHTML = 'lonlat => '+lonlat; 
      }); 

      map.events.register("click", map, function(e) { 
       var position = this.events.getMousePosition(e); 
       var icon = new OpenLayers.Icon('http://maps.google.com/mapfiles/ms/icons/red-pushpin.png'); 
       var lonlat = map.getLonLatFromPixel(position); 
       var lonlatTransf = lonlat.transform(map.getProjectionObject(), proj4326); 
       alert ('lonlatTrans=> lat='+lonlatTransf.lat+' lon='+lonlatTransf.lon+'\nlonlat=>'+lonlat+'\nposition=>'+position); 
       var lonlat = lonlatTransf.transform(proj4326, map.getProjectionObject()); 
       var markerslayer = new OpenLayers.Layer.Markers("Markers"); 
       markerslayer.addMarker(new OpenLayers.Marker(lonlat, icon)); 
       map.addLayer(markerslayer); 
      }); 
      map.addControl(new OpenLayers.Control.LayerSwitcher()); 
     } 
    </script> 
    </head> 

    <body onload="init()"> 
    <h1 id="title">MousePosition Control</h1> 
    <div id="tags">coordinate</div> 
    <p>Click on map and create marker</p> 
    <div id="map" class="smallmap"></div> 
    <div id="coords"></div> 
    <div id="lonlatTG"></div> 
    <div id="lonlatTrans"></div><br/> 
    <p> 
    see how, even though we did NOT transform [lonlat], 
    <br/>it was nevertheless transformed 
    </p> 
    <div id="lonlatDouble"></div> 

    </body> 
</html>

ありマッピングしますので、私は2つのことを成し遂げることができることをthis example from openlayersので適応しましたこの簡単な例で使用されているように、LonLatのTRANSFORMメソッドについて知っておく必要があるものです。[.transform（projection1、projection2）]をLonLatに適用すると、すべてのLonLatオブジェクトが変換されます。

特定のコマンドの順番で遊んでみると、私の言いたいことが分かります。ドラッグ可能なマーカーの

、this example has it all

出典

2012-07-08 16:55:17

あなたはあなたの例では、あなたはすべての新しく追加されたマーカーのための新たな層「マーカー」を作成しているという事実を知っていますか？それはあまりいいことではありません。より良い解決策は、上記のブロックでこれを1回作成することです。そうでなければ、それは非常に素晴らしい解決策です、それに感謝します。 – SummerBreeze

あなたは間違いなしです。レーダーの下で滑った。ヘッドアップのためのtks！ –

こんにちは、検索している別のlon latの違いを教えてください。ありがとう – rikket

OpenLayersを使用してマップにカスタムマーカーを動的に追加する

答えて

関連する問題