地图框如何在当前位置显示标记
Mapbox How to show marker on current location?
我想构建一个显示用户当前位置的页面。我想建立的功能是，用户可以选择地图上的任何地方，脚本将计算他的位置和点击位置之间的距离。
已经实现的是：网站显示位置，我的用户可以点击放第二个标记。
问题：第一个标记应该出现在用户的当前位置。
已具有以下内容的代码：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>
对不起，这里有点乱，我认为这不是你想要的，但可以根据需要进行更改（我创建了第二个featureLayer，这样表示找到的用户位置的原始标记就会留在地图上——这样一来，用户必须点击两次才能测量两个距离，但至少用户可以选择起点，而"找到的"起点可能不是用户的确切位置。)我去掉了它开始时的固定标记，因为我们不需要它。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';
});
相关文章：
- 当选择值x时，Javascript需要在正确的位置显示文本区域，从而循环通过具有选择选项的表单
- 在固定位置显示随机图像
- 在两个位置显示数组中的随机单词
- 如何编写 JQuery 函数以在 Django 模板的特殊位置显示文本
- 更改信息窗口的位置显示在谷歌地图API v3中
- 地图框如何在当前位置显示标记
- 在单击位置显示动画
- Angularjs-将指令中的值绑定到文档中的任意位置显示/隐藏
- 无序列表 jQuery 在固定位置显示列表中的选定项
- 如何将图像链接与 HTML 和 CSS 一起使用时，悬停时在其他位置显示图像
- 默认情况下，在 angularjs 中选择下拉列表中的最后一个位置显示占位符
- 如何使用文本在页面上的不同位置显示更多文本
- 在 Y 屏幕位置显示 CSS 动画
- 如何根据同一城市内的地理位置显示独特的内容
- 隐藏元素，但将该位置显示为空白
- 如何隐藏一个锚标记并在同一位置显示另一个锚标记
- 通过单击单个链接在网站的多个位置显示和隐藏文本
- AngularJS-如何在浏览器上的任意位置显示奇数次点击的元素
- 如何使用php在谷歌地图中按位置显示多个区域
- 一个不断变化的JavaScript变量在HTML中的多个位置显示(并更新）
