Mapbox Geçerli konumdaki işaretçi nasıl gösterilir?

Kullanıcıların geçerli konumunu gösteren bir sayfa oluşturmak istiyorum. Oluşturmak istediğim özellik, kullanıcının haritada herhangi bir yeri seçebilmesi ve komut dosyasının konumu ile tıklanan konum arasındaki mesafeyi hesaplayabilmesidir.Mapbox Geçerli konumdaki işaretçi nasıl gösterilir?

Neler başarıldı: web sitesi konum gösterir ve kullanıcı ikinci işaretleyiciyi koymak için tıklatabilir.

Sorun: İlk işaretçi geçerli konumdaki kullanıcı üzerinde görünmelidir.

Kod zaten sahip olsun: JSfiddle

<!DOCTYPE html> 
<html> 
<head> 
<meta charset=utf-8 /> 
<title>Distance between two markers</title> 
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' /> 
<script src='https://api.mapbox.com/mapbox.js/v2.4.0/mapbox.js'></script> 
<link href='https://api.mapbox.com/mapbox.js/v2.4.0/mapbox.css' rel='stylesheet' /> 
<style> 
body { margin:0; padding:0; } 
    #map { position:absolute; top:0; bottom:0; width:100%; } 
</style> 
</head> 
<body> 


<style> 
pre.ui-distance { 
    position:absolute; 
    bottom:10px; 
    left:10px; 
    padding:5px 10px; 
    background:rgba(0,0,0,0.5); 
    color:#fff; 
    font-size:11px; 
    line-height:18px; 
    border-radius:3px; 
    } 
    .ui-button { 
    background:#3887BE; 
    color:#FFF; 
    display:block; 
    position:absolute; 
    top:50%;left:50%; 
    width:160px; 
    margin:-20px 0 0 -80px; 
    z-index:100; 
    text-align:center; 
    padding:10px; 
    border:1px solid rgba(0,0,0,0.4); 
    border-radius:3px; 
    } 
    .ui-button:hover { 
    background:#3074a4; 
    color:#fff; 
    } 
</style> 
<div id='map'></div> 
<div class='ui-button'> 
<a href='#' id='geolocate' >Find me</a> 



<pre id='distance' class='ui-distance'>Click to place a marker</pre> 

<script> 
L.mapbox.accessToken = 'pk.eyJ1IjoiYWJ6YWwiLCJhIjoiY2llempiaW9oMWJvdXNnbTAxZnY4NTNvOSJ9.I0bW1wxrOYS2MPZD0FrTtA'; 
var map = L.mapbox.map('map', 'mapbox.streets') 
    .setView([38.9, -77], 12); 

// Start with a fixed marker. 
var fixedMarker = L.marker(new L.LatLng(38.9131775, -77.032544), { 
    icon: L.mapbox.marker.icon({ 
     'marker-color': 'ff8888' 
    }) 
}).bindPopup('Mapbox DC').addTo(map); 

// Store the fixedMarker coordinates in a variable. 
var fc = fixedMarker.getLatLng(); 

// Create a featureLayer that will hold a marker and linestring. 
var featureLayer = L.mapbox.featureLayer().addTo(map); 

// When a user clicks on the map we want to 
// create a new L.featureGroup that will contain a 
// marker placed where the user selected the map and 
// a linestring that draws itself between the fixedMarkers 
// coordinates and the newly placed marker. 
map.on('click', function(ev) { 
    // ev.latlng gives us the coordinates of 
    // the spot clicked on the map. 
    var c = ev.latlng; 

    var geojson = [ 
     { 
     "type": "Feature", 
     "geometry": { 
      "type": "Point", 
      "coordinates": [c.lng, c.lat] 
     }, 
     "properties": { 
      "marker-color": "#ff8888" 
     } 
     }, { 
     "type": "Feature", 
     "geometry": { 
      "type": "LineString", 
      "coordinates": [ 
      [fc.lng, fc.lat], 
      [c.lng, c.lat] 
      ] 
     }, 
     "properties": { 
      "stroke": "#000", 
      "stroke-opacity": 0.5, 
      "stroke-width": 4 
     } 
     } 
    ]; 

    featureLayer.setGeoJSON(geojson); 

    // Finally, print the distance between these two points 
    // on the screen using distanceTo(). 
    var container = document.getElementById('distance'); 
    container.innerHTML = (fc.distanceTo(c)).toFixed(0) + 'm'; 
}); 


var geolocate = document.getElementById('geolocate'); 
if (!navigator.geolocation) { 
    geolocate.innerHTML = 'Geolocation is not available'; 
} else { 
    geolocate.onclick = function (e) { 
     e.preventDefault(); 
     e.stopPropagation(); 
     map.locate(); 
    }; 
} 

// Once we've got a position, zoom and center the map 
// on it, and add a single marker. 
map.on('locationfound', function(e) { 
    map.fitBounds(e.bounds); 

    myLayer.setGeoJSON({ 
     type: 'Feature', 
     geometry: { 
      type: 'Point', 
      coordinates: [e.latlng.lng, e.latlng.lat] 
     }, 
     properties: { 
      'title': 'Here I am!', 
      'marker-color': '#ff8888', 
      'marker-symbol': 'star' 
     } 
    }); 

    // And hide the geolocation button 
    geolocate.parentNode.removeChild(geolocate); 



}); 
// If the user chooses not to allow their location 
// to be shared, display an error message. 
map.on('locationerror', function() { 
    geolocate.innerHTML = 'Position could not be found'; 
}); 
</script> 


</body> 
</html>

kaynak

2016-04-08 John Doe

Sorun: 38,9131775, -77,032544, kullanıcıların yere gösterilmesi gereken ilk işaretleyici gösterir. –

Üzgünüm, ben istediğiniz inanıyorum, ama istediğiniz gibi çalışmaya değişmiş olabilir tam olarak ne biraz dağınık değil (O kadar ikinci bir featureLayer yarattı bulunan kullanıcı konumunu gösteren orijinal işaretleyici haritada kalır - Bu şekilde iki mesafeyi ölçmek için iki kez tıklamak gerekir, ancak en azından kullanıcı başlangıç noktasını seçer, oysa "bulunan" başlangıç noktası kullanıcının tam konumu olmayabilir .) Başladığı sabitMarker'den kurtuldum çünkü ihtiyacımız yok. kısacası The JSFiddle

var map = L.mapbox.map('map', 'mapbox.streets') 
    .setView([38.9, -77], 12); 

// Create a featureLayer that will hold a marker and linestring. 
var featureLayer = L.mapbox.featureLayer().addTo(map); 
var secondFeatureLayer = L.mapbox.featureLayer().addTo(map); 

// 1. Let's create a counter so that we can record the separate clicks 
var counter = 0; 

// 2. Let's use some variables outside the function scope 
var c, 
    c2, 
    prevClick; 

map.on('click', function(ev) { 

    // 3. Check if we've yet to click once 
    if (counter < 1) { 

     // 4. assign current click coordinates to prevClick for later use 
     prevClick = ev.latlng; 

     // ev.latlng gives us the coordinates of 
     // the spot clicked on the map. 
     c = ev.latlng; 

     counter++; 
    } else { 
     c = prevClick; 
     counter = 0; 
    } 

    c2 = ev.latlng; 

    var geojson = [ 
     { 
     "type": "Feature", 
     "geometry": { 
      "type": "Point", 
      "coordinates": [c.lng, c.lat] 
     }, 
     "properties": { 
      "marker-color": "#ff8888" 
     } 
     }, 
     { 
     "type": "Feature", 
     "geometry": { 
      "type": "Point", 
      "coordinates": [c2.lng, c2.lat] 
     }, 
     "properties": { 
      "marker-color": "#ff8888" 
     } 
     },{ 
     "type": "Feature", 
     "geometry": { 
      "type": "LineString", 
      "coordinates": [ 
      [c.lng, c.lat], 
      [c2.lng, c2.lat] 
      ] 
     }, 
     "properties": { 
      "stroke": "#000", 
      "stroke-opacity": 0.5, 
      "stroke-width": 4 
     } 
     } 
    ]; 

    secondFeatureLayer.setGeoJSON(geojson); 

    // Finally, print the distance between these two points 
    // on the screen using distanceTo(). 
    var container = document.getElementById('distance'); 
    container.innerHTML = (c2.distanceTo(c)).toFixed(0) + 'm'; 
}); 


var geolocate = document.getElementById('geolocate'); 
if (!navigator.geolocation) { 
    geolocate.innerHTML = 'Geolocation is not available'; 
} else { 
    geolocate.onclick = function (e) { 
     e.preventDefault(); 
     e.stopPropagation(); 
     map.locate(); 
    }; 
} 

// Once we've got a position, zoom and center the map 
// on it, and add a single marker. 
map.on('locationfound', function(e) { 
    map.fitBounds(e.bounds); 

    featureLayer.setGeoJSON({ 
     type: 'Feature', 
     geometry: { 
      type: 'Point', 
      coordinates: [e.latlng.lng, e.latlng.lat] 
     }, 
     properties: { 
      'title': 'Here I am!', 
      'marker-color': '#ff8888', 
      'marker-symbol': 'star' 
     } 
    }); 

    // And hide the geolocation button 
    geolocate.parentNode.removeChild(geolocate); 



}); 
// If the user chooses not to allow their location 
// to be shared, display an error message. 
map.on('locationerror', function() { 
    geolocate.innerHTML = 'Position could not be found'; 
});

kaynak

2016-04-09 00:14:37

Mapbox Geçerli konumdaki işaretçi nasıl gösterilir?

cevap

İlgili konular