Ví dụ đơn giản của ArcGIS tự động hiển thị điểm đánh dấu

Question

Tôi đang gặp khó khăn khi cố gắng thêm một điểm đánh dấu có thể nhấp đơn giản vào ArcGIS, bản đồ thuần túy sử dụng JavaScript. Tất cả các ArcGIS Samples dường như để có được điểm đánh dấu của họ và thông tin popup liên quan từ máy chủ. Làm cách nào tôi có thể đạt được kết quả tương tự với ArcGIS như mã mẫu Google Maps này bên dưới?

<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

Hãy thử điều này:

1. Tạo một Point cho bạn kinh độ và vĩ độ
2. Chuyển đổi điểm để tham chiếu không gian Web Mercator, nếu nó cần thiết
3. Tạo một PictureMarkerSymbol cho bạn tùy chỉnh điểm đánh dấu hình ảnh
4. Tạo Graphic sử dụng điểm và ký hiệu
5. Tạo một GraphicsLayer
6. Thêm đồ họa để các lớp đồ họa
7. Thêm lớp đồ họa vào bản đồ của bạn
8. Thêm một tùy chỉnh onClick nghe sự kiện cho lớp của bạn

Một số mã tương đương:

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

Trên trình xử lý sự kiện, bạn có thể mở một tùy chỉnh infoWindow hoặc bất kỳ thứ gì bạn muốn:

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

Thay đổi "marker.png" và 32x32 để sử dụng hình ảnh đánh dấu tùy chỉnh và kích thước của bạn.

Answer 2

Hãy thử đặt biểu tượng hình ảnh của bạn bất cứ nơi nào trên màn hình Y X bằng cách sử dụng định vị CSS sau đó chỉ cần đặt handler onClick của bạn bên trong DIV thực tế hoặc thẻ IMG. Hãy thử chơi với sự kết hợp tương đối so với tuyệt đối để làm cho nó vừa phải.

div#header { 
position: relative; 
} 

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