如何顯示標記周圍的圓圈？

Question

我正在嘗試在標記周圍顯示一個圓圈，以告訴用戶該標記的范圍。 到目前為止，我已經嘗試了以下代碼。 我無法顯示圈子。 我想要這樣的東西。

 var map = L.map('map').setView([42.35, -71.08], 13); var userLocation = new L.LatLng(42.237, -71.96); L.tileLayer('http://tiles.mapc.org/basemap/{z}/{x}/{y}.png', { attribution: 'Tiles by <a href="http://mapc.org">MAPC</a>, Data by <a href="http://mass.gov/mgis">MassGIS</a>', maxZoom: 17, minZoom: 9 }).addTo(map); var marker = L.marker(userLocation).addTo(map); var circle = L.circle(userLocation, { color: 'red', fillColor: '#f03', fillOpacity: 0.5, radius: 500 }).addTo(map); 

 .container { width: 800px; margin: 20px auto; } #map { width: 800px; height: 450px; border: 1px solid #AAA; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" /> <link rel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/0.4.0/MarkerCluster.css" /> <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script> <script type='text/javascript' src='http://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/0.4.0/leaflet.markercluster.js'></script> <div class="container"> <h1>Maps:</h1> <div id="map"></div> </div> 

Answer 1

畫出了圓，但是放置圓的坐標遠超出視口。

縮小3步，看到它位於Spencer和Leicester之間（跟着I-90從波士頓向西南方向行駛）。

首先在代碼中設置用戶位置，並將其用於視口定義，標記和圓的放置。

var userLocation = new L.LatLng(42.35, -71.08);
var map = L.map('map').setView(userLocation, 13);
//...
var marker = L.marker(userLocation).addTo(map);
//...
var circle = L.circle(userLocation, {
//...

獨立代碼：

var userLocation = new L.LatLng(42.35, -71.08);
var map = L.map('map').setView(userLocation, 13);
L.tileLayer('http://tiles.mapc.org/basemap/{z}/{x}/{y}.png',
{
    attribution: 'Tiles by <a href="http://mapc.org">MAPC</a>, Data by <a href="http://mass.gov/mgis">MassGIS</a>',
    maxZoom: 17,
    minZoom: 9
}).addTo(map);

var marker = L.marker(userLocation).addTo(map);

var circle = L.circle(userLocation, {
    color: 'red',
    fillColor: '#f03',
    fillOpacity: 0.5,
    radius: 500
}).addTo(map);

演示

看到這個JSFiddle

更新

Q引用了過時的傳單版本和CDN，這些版本和CDN似乎在當前發行版中存在一些問題。

使用以下資源網址，一切正常：

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.3/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin=""/>
<link rel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.3.0/MarkerCluster.css" />
<script src="https://unpkg.com/leaflet@1.3.3/dist/leaflet.js" integrity="sha512-tAGcCfR4Sc5ZP5ZoVz0quoZDYX5aCtEm/eu1KhSLj2c9eFrylXZknQYmxUssFaVJKvvc0dJQixhGjG2yXWiV9Q==" crossorigin=""></script>   
<script type='text/javascript' src='http://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.3.0/leaflet.markercluster.js'></script>