单击时创建 Mapbox JS 标记

Question

我目前正在将 mapbox js 与卫星图像结合使用 API，我想知道如何在地图上显示最后一次点击（来自用户）的非常简单的标记。

理想情况下，当用户在地图中单击时，它会显示一个半透明的小方块，该方块与卫星显示的放大区域相对应 API。

有大量关于与预先创建的当前标记进行交互的信息，但我想在单击时动态创建一个仅在下一次单击之前有效的标记。

它会像下面这样，只是半径较小。

Answer 1

如果您只是想添加圆圈并在下一次单击鼠标时将其删除，则可以使用以下方法：

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>

单击时创建 Mapbox JS 标记

Mapbox JS Marker Creation On Click

javascript

angularjs

mapbox