美好的一天!我有一个使用cordova(html和javascript)的本地应用程序。当用户更改其位置或更改坐标时,我需要实时在地图上移动标记的帮助。
这里是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();
所以,我的html文件上有3个按钮,可从js文件中调用3个功能-
startWatching()
,stopWatching()
和showHistory()
function startWatching()
将在用户移动或更改位置时监视坐标。function stopWatching()
将停止观看或获取坐标。function showHistory()
将显示观看的坐标列表。
var redIcon
是getLocation()
之后用户位置的标记var violetIcon
是已定义位置的标记
function f1(a, b)
将在地图上显示2个标记-function getLocation()
发生时,一个标记用于定义的位置,另一个标记是用户的位置。
现在,当用户更改位置或在地图上生成新坐标时,我需要移动用户位置的标记。我希望有人能帮助我。预先感谢`
美好的一天!我有一个使用cordova(html和javascript)的本地应用程序。当用户更改其位置或坐标时,我需要实时在地图上移动标记的帮助。这是...
您需要在f1
功能之外访问用户标记。您可以通过将标记分配给全局定义的变量来执行此操作。