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 Marker创建

1 个答案: