ArcGISの単純な例マーカーを動的にレンダリングする

Question

単純なクリック可能なマーカーをArcGISに追加しようとしています。 ArcGIS Samplesはすべて、マーカーと関連するポップアップ情報をサーバーから取得しているようです。 以下のGoogle Mapsサンプルコードと同じ結果をArcGISでどのように達成できますか？

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
<div id="map" style="width: 500px; height: 500px;"></div> 
<script type="text/javascript"> 
    window.onload = function() { 
     var myOptions = { 
      zoom: 2, 
      center: new google.maps.LatLng(40, -75), 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     }; 

     var map = new google.maps.Map(document.getElementById("map"), myOptions); 

     var icon = new google.maps.MarkerImage("http://cinnamonthoughts.org/wp-content/uploads/2010/01/Custom-Marker-Avatar.png"); 

     var markerOptions = { 
      icon: icon, 
      map: map, 
      position: new google.maps.LatLng(37.7699298, -122.4469157), 
     }; 

     var marker = new google.maps.Marker(markerOptions); 

     google.maps.event.addListener(marker, 'click', function() { 
      var infoWindow = new google.maps.InfoWindow(); 
      infoWindow.setContent("hello world"); 
      infoWindow.open(map, marker); 
     }); 
    }; 
</script> 

Answer 1

これを試してみてください：

1. あなたのためのPoint経度と緯度
2. を作成し、それは
3. 必要だと、Webメルカトル空間参照にポイントを変換PictureMarkerSymbolあなたのためのカスタムピクチャーマーカーを作成します。
4. ポイントと記号を使用してGraphicを作成してください。
5. GraphicsLayer
6. があなたの層にカスタムonClickイベントリスナーを追加します
7. があなたのマップ
8. にグラフィックレイヤーを追加し、グラフィック層にグラフィックを追加作成

いくつかの同等のコード：

var point = new esri.geometry.Point(longitude, latitude); 
point = esri.geometry.geographicToWebMercator(point); 
var symbol = new esri.symbol.PictureMarkerSymbol("marker.png", 32, 32); 
var graphic = new esri.Graphic(point, symbol); 
var layer = new esri.layers.GraphicsLayer(); 
layer.add(graphic); 
map.addLayer(layer); 
dojo.connect(layer, "onClick", onClick); 

イベントリスナーでは、カスタムinfoWindowなど、好きなものを開くことができます。

function onClick(event) { 
    map.infoWindow(...) 
... 

"marker.png"と32x32を変更して、カスタムマーカー画像と寸法を使用します。

Answer 2

そしてちょうど実際のDIVやIMGタグ内でご使用のonClickハンドラを入れCSSのポジショニングを使用して、画面X Yのどこにでもあなたのイメージアイコンを配置してみます。それをちょうど良いものにするために、相対的なものと絶対的なものを組み合わせて試してみてください

div#header { 
position: relative; 
} 

img#headimg { 
position: absolute; 
left: whatever you like 
top: whatever you like 
}