Mapbox JS標記創建點擊

我目前使用mapbox js與衛星圖像API結合使用，我想知道如何顯示地圖上最後一次點擊（來自用戶）的非常簡單的標記。Mapbox JS標記創建點擊

理想情況下，當用戶在地圖上單擊時，它將顯示一個小的半透明正方形，該正方形對應於由衛星API顯示的放大區域。

關於與預先創建的當前標記進行交互的信息很多，但是我想在點擊時動態創建一個標記，直到下一次點擊。

這將是如下所示，只有一個較小的半徑。

2016-04-12 maxwell

如果你只是希望添加的圈子，並刪除它的下一個鼠標點擊，像這樣的工作：

L.mapbox.accessToken = 'pk.eyJ1IjoiY2NhbnRleSIsImEiOiJjaWVsdDNubmEwMGU3czNtNDRyNjRpdTVqIn0.yFaW4Ty6VE3GHkrDvdbW6g'; 
 
var map = L.mapbox.map('map', 'mapbox.streets').setView([38.91338, -77.03236], 16); 
 

 
streetsBasemap = L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoiY2NhbnRleSIsImEiOiJjaWVsdDNubmEwMGU3czNtNDRyNjRpdTVqIn0.yFaW4Ty6VE3GHkrDvdbW6g', { 
 
    maxZoom: 18, 
 
    minZoom: 6, 
 
    zIndex: 1, 
 
    id: 'mapbox.streets' 
 
}).addTo(map); 
 

 
map.on('click', addMarker); 
 

 
function addMarker(e){ 
 
    if (typeof circleMarker !== "undefined"){ 
 
    map.removeLayer(circleMarker);   
 
    } 
 
    //add marker 
 
    circleMarker = new L.circle(e.latlng, 200, { 
 
       color: 'red', 
 
       fillColor: '#f03', 
 
       fillOpacity: 0.5 
 
      }).addTo(map); 
 
}

body { margin:0; padding:0; } 
 
#map { position:absolute; top:0; bottom:0; width:100%; }

<!DOCTYPE html> 
 
    <html> 
 
    <head> 
 
    <meta charset=utf-8 /> 
 
    <title>Single marker</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> 
 

 
    </style> 
 
    </head> 
 
    <body> 
 
     <div id='map'></div> 
 

 

 
    </body> 
 
    </html>

來源

2016-04-12 21:24:49 CCantey

這是超級，它的工作但我想做一個修改。由於用戶的相關視圖是放大的圖像，所以我不能讓縮放後的圓圈變得相對較大。有沒有辦法在代碼中修改半徑，以便它根據地圖服從確切的單位？所以它會非常小規模（可能不完全是太規模，但明顯很小），並且隨着縮放比例的增加而變得更大？ – maxwell

我減小了半徑，非常小，它看起來更適合我的特定目的。無論如何，這是一個非常棒的答案，正是我的問題在尋找，所以我認爲它是正確的，謝謝。如果您碰巧知道如何以縮放比例動態縮放圓圈，請分享。 – maxwell

@maxwell - 我編輯了帖子，我們只是添加了L.circle，而不是circleMarker - 半徑參數是以米爲單位的。 – CCantey

Mapbox JS標記創建點擊

回答

相關問題