Mapbox JS 标记创建点击

Question

Mapbox JS 标记创建点击

max*_*ell 4 javascript angularjs mapbox

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

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

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

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

Answer 1

CCa*_*tey 6

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

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);
}

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

<!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>

Run Code Online (Sandbox Code Playgroud)

归档时间：	9 年，6 月前
查看次数：	5961 次
最近记录：	9 年，6 月前