ArcGIS simple пример динамического отображения маркера
Я с трудом пытаюсь добавить простой кликабельный маркер в ArcGIS, карту, используя исключительно JavaScript. Все Образцы ArcGIS кажется, чтобы получить их маркер и связанную всплывающую информацию с сервера. как я могу достичь того же результата с 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 ответов
попробуйте это:
- создать
Point
для вас долгота и широта - преобразовать точку в пространственную привязку Web Mercator, если это необходимо
- создать PictureMarkerSymbol для Вы пользовательских picture маркер
- создать
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(...)
...
изменить "маркер.png " и 32x32 для использования пользовательского изображения и размеров маркера.
попробуйте разместить значок изображения в любом месте экрана X Y с помощью позиционирования CSS, а затем просто поместите обработчик onClick в фактический тег DIV или IMG. Попробуйте сыграть с комбинацией относительной и абсолютной, чтобы получить ее правильно.
div#header {
position: relative;
}
img#headimg {
position: absolute;
left: whatever you like
top: whatever you like
}