ArcGIS simple пример динамического отображения маркера

Я с трудом пытаюсь добавить простой кликабельный маркер в ArcGIS, карту, используя исключительно JavaScript. Все Образцы ArcGIS кажется, чтобы получить их маркер и связанную всплывающую информацию с сервера. как я могу достичь того же результата с ArcGIS, что и приведенный ниже пример кода Google Maps?

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

2 ответов


попробуйте это:

  1. создать Point для вас долгота и широта
  2. преобразовать точку в пространственную привязку Web Mercator, если это необходимо
  3. создать PictureMarkerSymbol для Вы пользовательских picture маркер
  4. создать Graphic использование точки и символа
  5. создать GraphicsLayer
  6. добавить рисунок в графический слой
  7. добавьте графический слой к вашему карта
  8. добавьте пользовательский прослушиватель событий onClick в свой слой

некоторый эквивалентный код:

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(...)
...

изменить "маркер.png " и 32x32 для использования пользовательского изображения и размеров маркера.


попробуйте разместить значок изображения в любом месте экрана X Y с помощью позиционирования CSS, а затем просто поместите обработчик onClick в фактический тег DIV или IMG. Попробуйте сыграть с комбинацией относительной и абсолютной, чтобы получить ее правильно.

div#header {
position: relative;
}

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