Mapbox如何在當前位置顯示標記？

我想建立一個顯示用戶當前位置的頁面。我想建立的功能是，用戶可以選擇地圖上的任何地方，腳本將計算他的位置和點擊位置之間的距離。Mapbox如何在當前位置顯示標記？

已經實現了什麼：網站顯示位置，我用戶可以點擊放置第二個標記。

問題：第一個標記應顯示在用戶當前位置。

代碼已經具備： 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>

來源

2016-04-08 John Doe

問題簡稱：第一標記示出了上38.9131775，-77.032544，應該在用戶位置上顯示。 –

對不起，這是一個有點亂，不正是我相信你想要的，但可以改變工作，只要你想（我創建了一個第二featureLayer使表示找到的用戶位置的原始標記停留在地圖上 - 這樣就必須點擊兩次以測量兩個距離，但至少用戶可以選擇起點，而「找到的」起點可能不是用戶的確切位置）我擺脫了開始的fixedMarker，因爲我們不需要它。 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'; 
});

來源

2016-04-09 00:14:37

Mapbox如何在當前位置顯示標記？

回答

相關問題