Javascript 如何显示标记周围的圆圈？

我试图在标记周围显示一个圆圈，它将告诉用户该标记的范围。到目前为止，我已经尝试了以下代码。我无法显示圆圈。 我想要这样的东西。

var-map=L.map（'map'）.setView（[42.35，-71.08]，13）；
var userLocation=新L.LatLng（42.237，-71.96）；
L.tileLayer（'http://tiles.mapc.org/basemap/{z} /{x}/{y}.png'{
属性：“平铺依据，数据依据”，
maxZoom:17，
最小缩放：9
}).addTo（地图）；
var marker=L.marker（userLocation）.addTo（map）；
var circle=L.circle（用户位置{
颜色：“红色”，
填充颜色：“#f03”，
填充不透明度：0.5，
半径：500
}).addTo（地图）
.container{
宽度：800px；
保证金：20px自动；
}
#地图{
宽度：800px；
高度：450px；
边框：1px实心#AAA；
}

地图：
绘制圆，但放置圆的坐标远远超出视口

缩小3个台阶，看到它位于斯宾塞和莱斯特之间（沿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);

var userLocation=新的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'，
{
属性：“平铺依据，数据依据”，
maxZoom:17，
最小缩放：9
}).addTo（地图）；
var marker=L.marker（userLocation）.addTo（map）；
var circle=L.circle（用户位置{
颜色：“红色”，
填充颜色：“#f03”，
填充不透明度：0.5，
半径：500
}).addTo（地图）；

演示

看到这个了吗

更新
Q引用了过时的传单版本和CDN，它们似乎与当前版本存在一些问题

使用以下资源URL，一切正常：

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


我不确定我是否理解你想做什么。@IvanRubinson我想画一个半径标记。我已经更新了我的问题。你能做一个简单的回答吗？为什么不使用当前的传单verison？（1.3.3）我收到未捕获错误：无效的LatLng对象：（42.237，NaN）请显示您的完整代码。应用我的修改，在
42.237
deg处不再有坐标，谢谢。我的错误是我用的是旧版本的传单？我想是的。我遇到了与使用0.7.3版时相同的错误。