ArcGIS 简单示例动态渲染标记

Question

我很难尝试将简单的可点击标记添加到 ArcGIS，纯粹使用 JavaScript 进行地图绘制。所有ArcGIS Samples 似乎都从服务器获取了他们的标记和相关的弹出信息。 如何使用 ArcGIS 获得与以下 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

试试这个：

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 以使用您的自定义标记图像和尺寸。

Answer 2

尝试使用 CSS 定位将您的图像图标放置在屏幕 X Y 上的任何位置，然后将您的 onClick 处理程序放在实际的 DIV 或 IMG 标记中。尝试使用相对与绝对的组合来获得恰到好处。

div#header {
position: relative;
}

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