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

试试这个：

为您的经度和纬度创建Point
如果有必要，将点转换为Web墨卡托空间参考
为您自定义图片标记创建PictureMarkerSymbol
使用点和符号

Graphic

创建GraphicsLayer
将图形添加到图层
将图层添加到地图
向图层添加自定义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
}

ArcGIS简单示例动态渲染标记

2 个答案: