用于切換“顯示您的位置”的Javascript傳單地圖

我有一張傳單地圖，顯示該人當前所在位置（當前位置）周圍的區域，通常我希望地圖在他們旅行時“跟隨”該人。我為此使用了 mymap.panTo 命令。這一切作業正常。它每 5 秒更新一次地圖并平移以完美地以當前人物為中心。

有時，盡管此人可能希望將地圖滾動到更遠的地方以查看某些內容。這有效......直到 5 秒計數器啟動并再次將地圖平移回其位置。惱人的。

我在各種地圖應用程式上看到了地圖上的按鈕/切換按鈕，人們可以點擊它來停止地圖跟隨他們。事實上，如果手動移動地圖，它通常會關閉，然后他們會單擊切換按鈕平移回當前位置。請參閱谷歌地圖的附加圖片，突出顯示他們所謂的“顯示您的位置”按鈕。這就是我想要的。

但這是如何做到的？這是我找不到的某種自定義傳單控制元件嗎？或者它是以某種方式完全以編程方式完成的（以及任何示例代碼片段？）。

任何幫助表示贊賞。

下面是我用來顯示我的地圖的代碼。

var streetmap = L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
      attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, Imagery ? <a href="https://www.mapbox.com/">Mapbox</a>',
      id: 'mapbox/streets-v11',
      accessToken: 'token code here' //redacted token
   }),
   satellite = L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
      attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, Imagery ? <a href="https://www.mapbox.com/">Mapbox</a>',
      id: 'mapbox/satellite-v9',
      accessToken: 'token code here' //redacted token   });
var baseMaps = {
     "Streetmap": streetmap,
     "Satellite": satellite
};
    
var mymap = L.map('mapid', { 
   center: [latitude,longitude],
   zoom: 17,
   layers: [streetmap] //default layer
}); 

var personicon = L.icon({
    iconUrl: '/js/personicon.png',
    iconSize: [20, 20]
    });
var playerLoc = new L.marker([latitude,longitude], {icon: personicon}) // set player location marker as a declared variable but don't put it on the map yet

在其他地方我有代碼來啟動地圖（一旦填充了變數）然后繼續更新位置

   const interval = setInterval(function() {
         if (is_running) { // we need to know that there is data populated before showing or updating the map with it
         if (!map_started) {  //start the map only once 
        L.control.layers(baseMaps).addTo(mymap); //show choice of layer views
            L.control.scale().addTo(mymap); //show scale bar
        console.log("Create current player marker:",MYID,latitude,longitude); 
            playerLoc.setLatLng([latitude,longitude]).addTo(mymap).bindPopup(MYID); //update current player marker, and now show it on the map
                map_started=true;
             }; //start the map only once
         updatemap(); // for current player location and circle colour.
      }; //update only if is_running
          mymap.invalidateSize(); //reset map view
    }, 5000); // update map every 5 seconds 

function updatemap() {  // Update the current player location on map
    playerLoc.setLatLng([latitude,longitude]); //update current player marker instead of creating new ones
    mymap.panTo([latitude,longitude]); // pan the map to follow the player (TODO: Can we toggle pan mode?)
}; // end updatemap

這段代碼一切正常。該mymap.panTo([latitude,longitude]);行是需要包含在條件中的內容“如果允許平移，則執行 mymap.panTo([latitude,longitude]);” 但是肯定有標準的傳單控制或方法嗎？我總是在別處看到這個東西

uj5u.com熱心網友回復：

您需要監聽movestart事件，以檢測用戶是否移動了地圖。但是這個事件也是由panTo函式觸發的，所以你需要一個標志來指示movestart是由間隔還是由用戶觸發。

var currentAutoMove = false; // needed to check in `movestart` event-listener if moved from interval or by user
var pauseAutoMove = false; // if true -> Stops moving map

var latitude,longitude;
setInterval(()=>{
    latitude = playerLoc.getLatLng().lat   0.001;
    longitude = playerLoc.getLatLng().lng   0.001;
    updatemap();
}, 1000)


function updatemap() {  // Update the current player location on map
    playerLoc.setLatLng([latitude,longitude]);
    
    if(!pauseAutoMove){
       currentAutoMove = true; // Set flag, that currently map is moved by interval
       map.panTo([latitude,longitude]);
       currentAutoMove = false; // Remove flag, that currently map is moved by interval
   }
}


map.on('movestart',(e)=>{
    console.log(e, currentAutoMove);
  if(!currentAutoMove){ // Check if map is moved by interval or by user
    pauseAutoMove = true; // set flag, to stop moving map
  }
})

// Start auto move again, if button clicked
L.DomEvent.on(document.getElementById('toPos'),'click',(e)=>{
    pauseAutoMove = false; // reset flag, to stop moving map -> start moving map
  map.panTo([latitude,longitude]);
})

要創建一個控制/按鈕來啟動自動移動，你只需要在谷歌搜索有很多例子，否則你可以使用 L.easybutton。

演示：https : //jsfiddle.net/falkedesign/8akw3ust/

uj5u.com熱心網友回復：

非常感謝 Falke Design，我使用了上面答案中的建議。對于我想要的按鈕，我的代碼現在看起來像這樣：

var panbtn = L.easyButton({
  states: [{
    stateName: 'pauseAutoMove',      
    icon:      'fa-sign-in fa-lg',               
    title:     'Centre display at current Player', //Tooltip
    onClick: function(btn, map) {
      console.log("AutoMoveButton pressed");
      panbtn.state('AutoMove');                               
      mymap.panTo([latitude,longitude]); 
    }
  }, {
    stateName: 'AutoMove',
    icon:      'fa-crosshairs fa-lg',
  }]
}).addTo(mymap);

mymap.on("zoomstart", function (e) { currentAutoMove = true }); //Set flag, that currently map is moved by a zoom command
mymap.on("zoomend", function (e) { currentAutoMove = false }); //Remove flag again

mymap.on('movestart',(e)=>{ //Check if map is being moved
    if(!currentAutoMove){ //ignore if it was a natural PlayerLoc Auto update
        pauseAutoMove = true; //set flag to stop Auto moving map 
            console.log("Map moved");
        panbtn.state('pauseAutoMove'); //change button style to remove crosshairs
    }
});

在 updatemap 函式中的代碼：

    if(!pauseAutoMove){ //pan the map to follow the player unless it is on pause
            currentAutoMove = true; //Set flag, that currently map is moved by a normal PlayerLoc Auto update
            mymap.panTo([latitude,longitude]); 
            currentAutoMove = false; //Remove flag again
    };

非常感謝。

標籤：javascript 谷歌地图 传单

上一篇：表單提交上的sessionStorage

下一篇：使用Flutter在Google地圖中折線點中的多個標記