MapBox JS Marker Creation Bei dem Klicken

ich zur Zeit MapBox js in Verbindung mit einem Satellitenbild API und ich frage mich, bin mit, wie eine sehr einfachen Markierung des letzten Klick angezeigt werden (vom Benutzer) auf der Karte.MapBox JS Marker Creation Bei dem Klicken

Idealfall, wenn der Benutzer in der Karte klickt wäre es ein kleines halbtransparenten Quadrat angezeigt werden, die die gezoomt Bereich entsprechen würde durch den Satelliten API angezeigt wird.

Es gibt eine Unmenge an Informationen über den aktuellen Marker in Wechselwirkung, die zuvor erstellt wurden, aber ich möchte, um dynamisch eine Markierung auf Klick erstellen, die nur bis zum nächsten Klick lebt.

Es wäre mit einem kleineren Radius etwas wie unten, nur sein.

Quelle

2016-04-12 maxwell

Wenn Sie gerade suchen, um den Kreis zu addieren und sie auf dem nächsten Mausklick zu entfernen, wie etwas, das funktionieren würde:

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>

Quelle

2016-04-12 21:24:49 CCantey

Das ist super, es funktioniert aber ich möchte eine Änderung vornehmen. Da die korrelierende Ansicht für den Benutzer ein gezoomtes Bild ist, wahrscheinlich 1 Acre breit, kann der Kreis beim Verkleinern nicht größer werden. Gibt es eine Möglichkeit, den Radius im Code so zu ändern, dass er genau der Einheit gemäß der Karte entspricht? Also wäre es in einem großen Maßstab sehr klein (vielleicht nicht genau zu skalieren, aber merklich klein) und größer, wenn die Zoomskala zunimmt. – maxwell

Ich habe den Radius sehr klein gemacht und es sieht besser für meine speziellen Zwecke aus. Egal, das ist eine tolle Antwort und genau das, wonach meine Frage gesucht hat, also markiere ich es richtig, danke. Wenn Sie wissen, wie Sie den Kreis dynamisch mit der Zoomskalierung skalieren können, teilen Sie dies bitte mit. – maxwell

@maxwell - Ich habe den Post bearbeitet, wir fügen einfach L.circle statt circleMarker hinzu - der radius-Parameter ist in Metern. – CCantey

MapBox JS Marker Creation Bei dem Klicken

Antwort

Verwandte Themen