Простой пример ArcGIS для динамического рендеринга маркера - PullRequest
Новая
       5

Простой пример ArcGIS для динамического рендеринга маркера

8 голосов
/ 12 марта 2012

Я с трудом пытаюсь добавить простой кликабельный маркер в ArcGIS, карту исключительно с помощью JavaScript.Все ArcGIS Samples , похоже, получают свой маркер и связанную всплывающую информацию с сервера. Как я могу добиться того же результата с 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 ]

10 голосов
/ 15 марта 2012

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

  1. Создайте Point для вас долготу и широту
  2. Преобразовать точку в пространственную привязку Web Mercator, если это необходимо
  3. Создайте PictureMarkerSymbol для своего пользовательского маркера изображения
  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(...)
...

Измените "marker.png" и 32x32, чтобы использовать собственное изображение и размеры маркера.

0 голосов
/ 14 марта 2012

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

div#header {
position: relative;
}

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