[英]Update the location of the marker on the map when a user changes position or coordinates change
Good day!再会! I have a native app using cordova (html and javascript).我有一个使用cordova(html和javascript)的本机应用程序。 I need help with moving the marker on the map in real time manner as the user changes its position or the coordinates change.当用户更改其位置或坐标更改时,我需要帮助以实时方式在地图上移动标记。
Here's the full source code of mapping.js
这是mapping.js
的完整源代码
var mbAttr =
'Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
'© <a href="https://www.mapbox.com/">Mapbox</a>',
mbUrl =
"https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw";
var redIcon = new L.Icon({
iconUrl:
"https://cdn.rawgit.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-red.png",
shadowUrl:
"https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/images/marker-shadow.png",
iconSize: [25, 41],
iconAnchor: [12, 41],
popupAnchor: [1, -34],
shadowSize: [41, 41]
});
var violetIcon = new L.Icon({
iconUrl:
"https://cdn.rawgit.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-violet.png",
shadowUrl:
"https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/images/marker-shadow.png",
iconSize: [35, 51],
iconAnchor: [17, 51],
popupAnchor: [1, -34],
shadowSize: [51, 51]
});
var streets = L.tileLayer(mbUrl, { id: "mapbox.streets", attribution: mbAttr });
var mymap;
var locationHistory = [];
var watch;
function f1(a, b) {
lat = a;
lon = b;
mymap = L.map("mapid", {
center: [14.54965, 121.00737],
zoom: 16,
layers: [streets]
});
L.marker([14.4311, 120.9682], { icon: violetIcon })
.addTo(mymap)
.bindPopup("New Bacoor City Hall");
L.marker([a, b], { icon: redIcon })
.addTo(mymap)
.bindPopup("You are here.")
.openPopup()
.update();
}
function getLocation() {
navigator.geolocation.getCurrentPosition(showPosition, showError);
}
function showPosition(position) {
f1(position.coords.latitude, position.coords.longitude);
}
function showHistory() {
var el = document.getElementById("historyWrapper");
if (el.style.display === "none") {
el.style.display = "block";
} else {
el.style.display = "none";
}
}
function startWatching() {
var toastHTML = "Tracking started...";
M.toast({html: toastHTML, displayLength: 3000});
watch = navigator.geolocation.watchPosition(onSuccess, onError, {
maximumAge: 10000,
timeout: 5000,
enableHighAccuracy: true
});
var el = document.getElementById("historyWrapper");
el.style.display = "none";
}
function stopWatching() {
if (confirm("Do you want to stop tracking?")) {
var toastHTML = "Tracking Stopped.";
M.toast({html: toastHTML, displayLength: 3000});
navigator.geolocation.clearWatch(watch);
var el = document.getElementById("locationHistory");
locationHistory.forEach(function(location) {
el.innerHTML =
"<li>Latitude: " +
location.coords.latitude +
"<br />" +
"Longitude: " +
location.coords.longitude +
"<br />" +
"<strong>Date: " +
new Date().toLocaleString() +
"</strong><hr /></li>" +
el.innerHTML;
});
document.getElementById("historyWrapper").style.display = "block";
document.getElementById("geolocation").innerHTML = "";
}
}
function showError(error) {
switch (error.code) {
case error.PERMISSION_DENIED:
var toastHTML = "User denied the request for geolocation.";
M.toast({html: toastHTML, displayLength: 3000});
break;
case error.POSITION_UNAVAILABLE:
var toastHTML = "Location information is unavailable.";
M.toast({html: toastHTML, displayLength: 3000});
break;
case error.TIMEOUT:
var toastHTML = "The request to get user location timed out.";
M.toast({html: toastHTML, displayLength: 3000});
break;
case error.UNKNOWN_ERROR:
var toastHTML = "An unknown error occurred.";
M.toast({html: toastHTML, displayLength: 3000});
break;
}
window.close();
}
function onSuccess(position) {
locationHistory.push(position);
var element = document.getElementById("geolocation");
element.innerHTML = "";
element.innerHTML =
"Latitude: " +
position.coords.latitude +
"<br />" +
"Longitude: " +
position.coords.longitude +
"<br />" +
"<hr />" +
element.innerHTML;
}
function onError(error) {
var toastHTML = "code: " + error.code + "\n" + "message: " + error.message + "\n";
M.toast({html: toastHTML, displayLength: 3000});
}
getLocation();
So, I have 3 buttons on my html file that calls the 3 functions from the js file - startWatching()
, stopWatching()
and showHistory()
所以,我的 html 文件上有 3 个按钮,它们调用 js 文件中的 3 个函数 - startWatching()
、 stopWatching()
和showHistory()
function startWatching()
will watch coordinates as the user moves or change location. function startWatching()
将在用户移动或改变位置时观察坐标。 function stopWatching()
will stop watching or getting coordinates. function stopWatching()
将停止观看或获取坐标。 function showHistory()
will display the list of coordinates watched. function showHistory()
将显示观察到的坐标列表。
var redIcon
is the marker for the location of the user after getLocation()
var violetIcon
is the marker for the defined location var redIcon
是getLocation()
之后用户位置的标记var violetIcon
是定义位置的标记
The function f1(a, b)
will display 2 markers on the map - one marker is for a defined location and the other marker is the location of the user when function getLocation()
takes place. function f1(a, b)
将在地图上显示 2 个标记 - 一个标记用于定义的位置,另一个标记是执行function getLocation()
时用户的位置。
Now, I need to move the marker of user's location when the user changes its position or when a new coordinates is generated on the map.现在,当用户更改其位置或在地图上生成新坐标时,我需要移动用户位置的标记。 I hope someone will help me on this.我希望有人会帮助我。 Thanks in advance`提前致谢`
You need to access your user marker outside of the f1
function.您需要在f1
函数之外访问您的用户标记。 You could do this by assigning the marker to a globally defined variable.您可以通过将标记分配给全局定义的变量来做到这一点。
Define your marker variable in the global scope.在全局范围内定义标记变量。
var userMarker = null;
In your f1
function assign the created marker to the userMarker
variable.在您的f1
函数中,将创建的标记分配给userMarker
变量。
function f1(a, b) {
...
userMarker = L.marker([a, b], { icon: redIcon })
.addTo(mymap)
.bindPopup("You are here.")
.openPopup()
.update();
}
Now you can use the userMarker
marker instance in your onSuccess
function when the position of the user has been updated.现在,当用户的位置已更新时,您可以在onSuccess
函数中使用userMarker
标记实例。 Use the setLatLng()
method to update the position of the marker with new coordinates.使用setLatLng()
方法用新坐标更新标记的位置。
function onSuccess(position) {
// Destructure assignment to get the lat and long from the position object.
let { latitude, longitude } = position.coords;
if (userMarker !== null) {
userMarker.setLatLng([latitude, longitude]);
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.