Prosty przykład ArcGIS dynamicznie renderujący znacznik

Question

Mam trudności z dodaniem prostego klikalnego znacznika do ArcGIS, mapy wyłącznie przy użyciu JavaScript. Wydaje się, że wszystkie znaczniki i związane z nimi informacje o wyskakujących okienkach pochodzą z serwera. W jaki sposób mogę osiągnąć ten sam wynik w usłudze ArcGIS niż poniższy przykładowy kod Mapy Google?

<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

Spróbuj tego:

1. Tworzenie Point Ci długość i szerokość geograficzna
2. Konwersja punkt do sieci Mercator odniesienia przestrzennego, jeśli jest to konieczne
3. Tworzenie PictureMarkerSymbol dla Ciebie niestandardowego znacznika obrazu
4. Utwórz Graphic za pomocą punktu i symbolu
5. Tworzenie GraphicsLayer
6. Dodaj grafikę do warstwy graficznej
7. Dodaj warstwę graficzną do mapy
8. Dodaj niestandardową onClick zdarzeń słuchacza do warstwy

Niektóre równoważny kod:

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); 

W odbiorniku zdarzeń można otworzyć niestandardowe infoWindow lub dowolne:

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

Zmień "marker.png" i 32x32, aby użyć niestandardowego obrazu znacznika i jego wymiarów.

Answer 2

Spróbuj umieścić ikonę obrazu w dowolnym miejscu na ekranie X Y z wykorzystaniem pozycjonowania CSS następnie wystarczy umieścić obsługi onClick wewnątrz rzeczywistej DIV lub tagu IMG. Spróbuj grać z kombinacją względną vs absolutną, aby uzyskać właściwą.

div#header { 
position: relative; 
} 

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