leaflet(二)画中心点标记和范围

接上一篇文章

leaflet(一)初始化地图https://blog.csdn.net/LovelyLittleCub/article/details/143051408?spm=1001.2014.3001.5502

<script>
export default {mounted() {this.drawRange();},/* 范围 */drawRange() {// 绘制中心点var markerImage = "xxx.png"; // 替换为你的图片路径var myIcon = L.icon({iconUrl: markerImage, // 图标图片的URLiconSize: [50, 50], // 图标的大小// iconAnchor: [22, 94], // 图标的锚点，即图标的位置应该定位在哪个像素上popupAnchor: [-3, -76], // 弹出框的锚点});let centerMarker = L.marker([lat, lng], {icon: myIcon,zIndexOffset: 1000,draggable: false,// setZIndexOffset: 0,}).addTo(atopMap);// 绘制范围// 圆：半径 radius 的单位为米let circle = L.circle([lat, lng], {radius: this.range * 1000,zIndexOffset: 3,}).addTo(atopMap);// 设置样式circle.setStyle({color: "red", //边线颜色weight: 2, //边线宽度opacity: 0.7, //透明度fillOpacity: 0.2, // 填充透明度fillColor: "#9f3138", //填充颜色lineStyle: "solid",});// 跳到圆的范围// atopMap.fitBounds(circle.getBounds());},
}
</script>