Mapbox Wie zeige ich Marker an der aktuellen Position?

Ich möchte eine Seite erstellen, die den aktuellen Standort des Benutzers anzeigt. Feature Ich möchte erstellen, dass Benutzer einen beliebigen Ort auf der Karte auswählen können und Skript berechnet die Entfernung zwischen seinem Standort und angeklickt Standort.Mapbox Wie zeige ich Marker an der aktuellen Position?

Was wurde erreicht: Die Website zeigt den Standort und ich Benutzer kann klicken, um den zweiten Marker zu setzen.

Problem: Der erste Marker sollte am aktuellen Standort des Benutzers erscheinen.

-Code, die bereits: 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>

Quelle

2016-04-08 John Doe

Problem kurz: erste Markierung zeigt auf 38,9131775, -77,032544, auf den Standort angezeigt werden soll. –

Sorry, es ist ein wenig chaotisch und nicht genau das, was ich glaube, Sie wollen, aber könnte geändert werden, um zu arbeiten, wie Sie wollen (Ich habe eine zweite featureLayer so dass die ursprüngliche Markierung, die den gefundenen Benutzerort kennzeichnet, bleibt auf der Karte - Auf diese Weise muss man zweimal klicken, um zwei Entfernungen zu messen, aber der Benutzer kann den Startpunkt wählen, während der "gefundene" Startpunkt möglicherweise nicht der genaue Ort des Benutzers ist .) Ich habe den fixedMarker, mit dem er beginnt, losgeworden, weil wir ihn nicht brauchen. 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'; 
});

Quelle

2016-04-09 00:14:37

Mapbox Wie zeige ich Marker an der aktuellen Position?

Antwort

Verwandte Themen