如何在OpenLayers中獲取用戶的當前位置以及緯度和經度

Question

我正在獲取用戶的當前位置，但無法顯示緯度和經度。 單擊標記時如何顯示緯度和經度。

任何幫助將不勝感激

謝謝！

function init() {

    this.convert = function(lat1, lon1, lat2, lon2){ 
        var R = 6378.137; // Radius of earth in KM
        var dLat = (lat2 - lat1) * Math.PI / 180;
        var dLon = (lon2 - lon1) * Math.PI / 180;
        var a = Math.sin(dLat/2) * Math.sin(dLat/2) +
        Math.cos(lat1 * Math.PI / 180) * Math.cos(lat2 * Math.PI / 180) *
        Math.sin(dLon/2) * Math.sin(dLon/2);
        var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
        var d = R * c;
        return d * 1000; // meters
    };

    this.addMarker = function(position) {
        var markers = new OpenLayers.Layer.Markers("Markers");
        map.addLayer(markers);
        markers.addMarker(new OpenLayers.Marker(position));
        map.on('click', function(e) {
    alert("Lat, Lon : " + e.latlng.lat + ", " + e.latlng.lng)
});

     };


    this.findLocations = function(latitude, longitude, fromProjection, toProjection) {
        for (i in Locations) {
          long = Locations[i].lon;
          lat = Locations[i].lat;

          if (convert(latitude,longitude,lat,long) <= 300) {
            var positionLocation = new OpenLayers.LonLat(long,lat).transform(fromProjection, toProjection);
            addMarker(positionLocation);
          } else {continue;}
        }   
    };

    this.getPosition = function(position){
        var latitude = position.coords.latitude;
        var longitude = position.coords.longitude;
        var fromProjection = new OpenLayers.Projection("EPSG:4326");   // Transform from WGS 1984
        var toProjection   = new OpenLayers.Projection("EPSG:900913"); // to Spherical Mercator Projection

        var position = new OpenLayers.LonLat(longitude,latitude).transform(fromProjection, toProjection);
        var zoom = 18; //maximum value

        addMarker(position);
        map.setCenter(position, zoom);
        findLocations(latitude, longitude, fromProjection, toProjection);
    };

    this.map = new OpenLayers.Map("basicMap");
    map.addLayer(new OpenLayers.Layer.OSM());
    map.zoomToMaxExtent();

    if(navigator.geolocation){
      navigator.geolocation.getCurrentPosition(getPosition);
    } 
}

Answer 1

您可以將點擊事件添加到地圖。 這是ol5的示例：

function onClick(e) {
  var features = map.getFeaturesAtPixel(e.pixel);
  if (features && features.length > 0) {
    var coords = features[0].getGeometry().getCoordinates();
    alert(ol.proj.transform(coords, "EPSG:3857", "EPSG:4326"));
  }
}
map.on("click", onClick);