javascript - ArcGIS 简单示例动态渲染标记

Question

我很难尝试将简单的可点击标记添加到 ArcGIS，纯粹使用 JavaScript 绘制 map 。所有 ArcGIS Samples似乎从服务器获取他们的标记和相关的弹出信息。 如何使用 ArcGIS 获得与下面的 Google map 示例代码相同的结果？

<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. 为您的经度和纬度创建一个点
2. 如有必要，将点转换为 Web 墨卡托空间引用
3. 创建 PictureMarkerSymbol为您定制图片标记
4. 使用点和符号创建图形
5. 创建一个GraphicsLayer
6. 将图形添加到图形层
7. 将图形图层添加到您的 map
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 以使用您的自定义标记图像和尺寸。