亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

當用戶更改位置或坐標更改時更新地圖上標記的位置

當用戶更改位置或坐標更改時更新地圖上標記的位置

撒科打諢 2023-10-17 17:21:44
再會!我有一個使用 cordova (html 和 javascript)的本機應用程序。當用戶更改其位置或坐標更改時,我需要幫助實時移動地圖上的標記。這是完整的源代碼mapping.jsvar mbAttr =    'Map data &copy; <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]  });因此,我的 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()發生時用戶的位置?,F在,當用戶更改其位置或在地圖上生成新坐標時,我需要移動用戶位置的標記。我希望有人能在這方面幫助我。預先感謝`
查看完整描述

1 回答

?
回首憶惘然

TA貢獻1847條經驗 獲得超11個贊

您需要在f1函數之外訪問您的用戶標記。您可以通過將標記分配給全局定義的變量來完成此操作。


在全局范圍內定義標記變量。


var userMarker = null;

在您的f1函數中將創建的標記分配給userMarker變量。


function f1(a, b) {

? ...

? userMarker = L.marker([a, b], { icon: redIcon })

? ? .addTo(mymap)

? ? .bindPopup("You are here.")

? ? .openPopup()

? ? .update();

}

現在,當用戶的位置已更新時,您可以userMarker在函數中使用標記實例。onSuccess使用該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]);

? }

}


查看完整回答
反對 回復 2023-10-17
  • 1 回答
  • 0 關注
  • 119 瀏覽

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號