
一、安装leaflet和leaflet的定位插件
npm install leaflet
npm install leaflet.locatecontrol
二、写一个地图类
import * as L from 'leaflet';
import 'leaflet.locatecontrol';
import 'leaflet/dist/leaflet.css';
import 'leaflet.locatecontrol/dist/L.Control.Locate.min.css';
class Map {
map; // 地图对象
constructor() {
this.map = L.map('map', { // 'map' 指的是挂载地图的div标签的ID
minZoom: 2, // 最小缩放
maxZoom: 24, // 最大缩放
center: [23.125178, 113.280637], // 默认地图中心
zoom: 6, // 默认缩放层级
zoomControl: false, // 启用缩放控件
attributionControl: false, // 禁用右下角的版权说明
crs: L.CRS.EPSG3857,
});
// 添加底图
L.tileLayer(
'https://tile.openstreetmap.org/{z}/{x}/{y}.png', {},
).addTo(this.map);
// 添加定位控件
L.control
.locate({
position: 'topright', // 控件的位置
showPopup: false, // 显示popup
})
.addTo(this.map);
}
}
export default Map;
三、在页面上加载地图
在html页面上加个ID为’map’的标签:
<div>
<div id="map" />
</div>
修改其的样式:
<style>
#map {
width: 100%;
height: 100%;
}
</style>
在js中,导入上面写的那个类,然后new一下就有地图了。
Leaflet.Locate 定位插件
Github地址:https://github.com/domoritz/leaflet-locatecontrol
可配置项参考:
Option | Type | Description | Default |
---|---|---|---|
position | string | Position of the control | topleft |
layer | ILayer | The layer that the user’s location should be drawn on. | a new layer |
setView | boolean or string | Set the map view (zoom and pan) to the user’s location as it updates. Options are false , 'once' , 'always' , 'untilPan' , or 'untilPanOrZoom' | 'untilPanOrZoom' |
flyTo | boolean | Smooth pan and zoom to the location of the marker. Only works in Leaflet 1.0+. | false |
keepCurrentZoomLevel | boolean | Only pan when setting the view. | false |
initialZoomLevel | false or integer | After activating the plugin by clicking on the icon, zoom to the selected zoom level, even when keepCurrentZoomLevel is true. Set to false to disable this feature. | false |
clickBehavior | object | What to do when the user clicks on the control. Has three options inView , inViewNotFollowing and outOfView . Possible values are stop and setView , or the name of a behaviour to inherit from. | {inView: 'stop', outOfView: 'setView', inViewNotFollowing: 'inView'} |
returnToPrevBounds | boolean | If set, save the map bounds just before centering to the user’s location. When control is disabled, set the view back to the bounds that were saved. | false |
cacheLocation | boolean | Keep a cache of the location after the user deactivates the control. If set to false, the user has to wait until the locate API returns a new location before they see where they are again. | true |
showCompass | boolean | Show the compass bearing on top of the location marker | true |
drawCircle | boolean | If set, a circle that shows the location accuracy is drawn. | true |
drawMarker | boolean | If set, the marker at the users’ location is drawn. | true |
markerClass | class | The class to be used to create the marker. | LocationMarker |
compassClass | class | The class to be used to create the marker. | CompassMarker |
circleStyle | Path options | Accuracy circle style properties. | see code |
markerStyle | Path options | Inner marker style properties. Only works if your marker class supports setStyle . | see code |
compassStyle | Path options | Triangle compass heading marker style properties. Only works if your marker class supports setStyle . | see code |
followCircleStyle | Path options | Changes to the accuracy circle while following. Only need to provide changes. | {} |
followMarkerStyle | Path options | Changes to the inner marker while following. Only need to provide changes. | {} |
followCompassStyle | Path options | Changes to the compass marker while following. Only need to provide changes. | {} |
icon | string | The CSS class for the icon. | leaflet-control-locate-location-arrow |
iconLoading | string | The CSS class for the icon while loading. | leaflet-control-locate-spinner |
iconElementTag | string | The element to be created for icons. | span |
circlePadding | array | Padding around the accuracy circle. | [0, 0] |
createButtonCallback | function | This callback can be used in case you would like to override button creation behavior. | see code |
getLocationBounds | function | This callback can be used to override the viewport tracking behavior. | see code |
onLocationError | function | This even is called when the user’s location is outside the bounds set on the map. | see code |
onLocationOutsideMapBounds | function | Use metric units. | see code |
showPopup | boolean | Display a pop-up when the user click on the inner marker. | true |
strings | object | Strings used in the control. Options are title , text , metersUnit , feetUnit , popup and outsideMapBoundsMsg | see code |
strings.popup | string or function | The string shown as popup. May contain the placeholders {distance} and {unit} . If this option is specified as function, it will be executed with a single parameter {distance, unit} and expected to return a string. | see code |
locateOptions | Locate options | The default options passed to leaflets locate method. | see code |
如果要自己写一个定位方法
// 获取定位
// this.map是地图对象
getLocation() {
this.map.locate({
setView: true,
// watch: true, // 持续监听位置
// enableHighAccuracy: true, // 精准定位
});
// 'locationfound' 定位成功
this.map.once('locationfound', (e) => {
console.log(e)
});
// 'locationerror' 定位失败
this.map.once('locationerror', (e) => {
console.log(e)
});
}
然后将getLocation()
这个方法绑定在按钮上,这样每次点击按钮就触发一次定位。