ArcGIS Javascript api SimpleMarkerSymbol 点击事件答案

【问题标题】：ArcGIS Javascript api SimpleMarkerSymbol click eventArcGIS Javascript api SimpleMarkerSymbol 点击事件
【发布时间】：2014-09-10 14:22:45
【问题描述】：

当前正在处理的应用程序向 API 发出请求，该 API 返回 Lat、Long 对以及一些记录 ID。从 API 成功响应后，应用程序使用 SimpleMarkerSymbol 将 LatLong 固定在基本地图上，并预计将记录 id 与标记附加。

在单击标记时，应用应从所选标记中检索 id 以发出进一步的请求。目前我能够成功地将标记固定在以下关键问题仍有待回答的地方

有什么方法可以捕获 SimpleMarkerSymbol 点击事件？
是否有任何方法可以将数据属性附加到将在分派 click 事件时使用的标记？

谢谢，喙嘴

【问题讨论】：

标签： javascript api arcgis

【解决方案1】：

我假设您提到的外部 API 不是 ArcGIS 要素服务，因此您需要手动创建图形来表示要素 - 如果不是这种情况，您可以稍微扩展一下这个问题。假设您可以同时满足这两个要求。

您可以使用 setAttributes 方法或通过在创建图形时传入属性对象来向图形添加属性。属性对象只是您创建的对象，每个属性都有一个属性。以下是前者的示例，假设 g 是您刚刚创建的图形：

g.setAttributes({
    id: 1,
    name: "London"
});

这会添加一个属性 id 和 name 设置为指定值的对象。

您可以在多个位置监听点击，例如，在地图本身或特定图形图层上。以下是使用地图的示例：

map.on("click", function (evt) {
    console.log(evt.graphic.attributes.name);
});

如您所见，click 事件传递了一个我称为 evt 的属性。该属性引用了被点击的图形 (evt.graphic)，并且该图形当然具有您设置的属性集合 (evt.graphic.attributes)。您可以通过属性对象的属性单独访问每个属性，如上面的 .name 所示。您可能需要进行一些检查，即在尝试访问之前检查 evt 是否包含图形，依此类推。

希望这会有所帮助。

【讨论】：

谢谢西蒙。是的，API 是与 ESRI 无关的外部服务。

【解决方案2】：

这是我的工作代码

 $points[] = array("point" => array(
                    $longitude,
                    $latitude
                ), 
                "color" => $color, 
                "site_name" => $account_namme
            );

以上是点数组格式

<script type="text/javascript">
        
            var map;
            require([
                "esri/map", "esri/geometry/Point", 
                "esri/symbols/SimpleMarkerSymbol", 
                "esri/graphic",
                "dojo/_base/array", "dojo/dom-style", 
                "dojo/domReady!"
            ], function(
                Map, Point,
                SimpleMarkerSymbol, Graphic,
                arrayUtils, domStyle
            ) {
                map = new Map("map",{
                    basemap: "streets",
                    center :[{$SITE_LONG}, {$SITE_LAT}],
                    zoom: 4,
                    minZoom: 0
                });
                
                map.on("load", mapLoaded);
                
                map.on("click", function (evt) {
                    
                    if(typeof evt.graphic.attributes !== 'undefined'){
                        console.log(evt.graphic.attributes.site_name);
                        var title = "Site Details";
                        var content =  "Site Name : " + evt.graphic.attributes.site_name;
    
                        map.infoWindow.setTitle(title);
                        map.infoWindow.setContent(content);
                        map.infoWindow.show(evt.mapPoint);
                    }
                    
                });
                function mapLoaded(){
                    
                    var points = {$POINTS|@json_encode};
                    arrayUtils.forEach(points, function(point) {
                        var graphic = new Graphic(new Point(point['point']), createSymbol(point['color']));
                        graphic.setAttributes({
                            site_name: point['site_name'],
                        });
                        map.graphics.add(graphic);
                    });
                }
                
                function createSymbol(color){
                    var markerSymbol = new esri.symbol.SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE, 10);
                    markerSymbol.setColor(new dojo.Color(color));
                    markerSymbol.setOutline(null);
                    
                    return markerSymbol;
                }
            });
        
    </script>

【讨论】：