javascript - 操作/在 OSM 地图中选择一个位置并显示标记

Question

我是 OSM API 的新手。（打开街道地图）

我目前正在寻找在 OpenLayers 中选择（或突出显示）矢量的解决方案。即正在尝试为用户设置位置。该用户可以通过单击地图（特定位置）来给出他的位置，然后需要对这些经度和纬度进行一些操作。

JS我试过的代码

 function showVehicleMap(){      

        ltArray = document.getElementById('deviceMonitorRightPaneForm:lat').value.split(",");
        lgArray = document.getElementById('deviceMonitorRightPaneForm:lon').value.split(",");                
        directionArray = document.getElementById('deviceMonitorRightPaneForm:direction').value.split(",");                

        map = createMap("deviceMap");    

        for(var i=0;i<ltArray.length;i++)
        {                                   
            var lonLat = new OpenLayers.LonLat( lgArray[i] ,ltArray[i] ).transform(               
                new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984
                map.getProjectionObject() // to Spherical Mercator Projection
                );                
            pointsArray.push(lonLat);
        }
        //prepare mid point
        var latAvg = document.getElementById('deviceMonitorRightPaneForm:latAvg').value;
        var lonAvg = document.getElementById('deviceMonitorRightPaneForm:lonAvg').value;
        var midpoint       = new OpenLayers.LonLat(lonAvg,latAvg).transform( fromProjection, toProjection);

        //create Marker
        var markers = new OpenLayers.Layer.Markers( "Markers" );
        map.addLayer(markers);
        //prepare list of markers
        markers = addMarkersByDirection(markers, pointsArray, directionArray);        

        map.zoomToExtent(markers.getDataExtent());
        map.setCenter (midpoint, 9);    

    //
    /* ]]> */   
    }

我如何实现它？

Answer 1

注册鼠标点击事件，通过鼠标获取位置：

map.events.register('click', map, function handleMapClick(e) {
          var clickedLonLat = map.getLonLatFromViewPortPx(e.xy).transform(map.projection, map.displayProjection);
       ...
       // place a OpenLayers.Layer.Marker at clickedLonLat for visual feedback
       // for convenience: map.panTo(clicketLonLat);
       ...
});