m-vue-map
v0.0.10
Published
```JavaScript import { createApp } from 'vue'; import App from './App.vue'; import MVueMap from 'm-vue-map';
Downloads
25
Readme
Vue3 离线地图组件
使用
import { createApp } from 'vue';
import App from './App.vue';
import MVueMap from 'm-vue-map';
createApp(App).use(MVueMap, 'http://{z}/{x}/{y}/x={x}&y={y}&z={z}.png').mount('#app');
<m-vue-map ref="mapRef" @resize="resize" />
import { ref, onMounted } from 'vue';
const mapRef = ref();
onMounted(() => {
console.log(mapRef.value); // { mMap, mTile, ... } mMap:Map实例对象,mTile:TileLayer实例对象
mapRef.value.mMap.addMarker([39.885266, 116.416629], { icon: mapRef.value.icon({ iconUrl:'图片', iconSize: [10, 10] }) }); //添加标注图标
});
//尺寸改变事件
const resize = () => {
mapRef.value.mMap.invalidateSize(true);
};
属性
width: { type: [Number, String], default: '100%' }, //地图宽度
height: { type: [Number, String], default: '100%' }, //地图高度
options: { type: Object, default: () => ({ center: [36, 110], zoom: 5, minZoom: 3, maxZoom: 10, attributionControl: false }) }, // 地图配置
tileUrl: { type: String, default: '' }, //瓦片地址
tileOptions: { type: Object, default: () => ({}) } // 瓦片配置
mMap方法
addMarker(latlng: LatLngExpression, options?: MarkerOptions); // 添加标注
addPopup(latlng: LatLngExpression, options?: TooltipOptions); // 添加弹出层
addTooltip(latlng: LatLngExpression, options?: TooltipOptions); // 添加提示
addImageOverlay(imageUrl: string, bounds: LatLngBoundsExpression, options?: ImageOverlayOptions); // 添加图片
addVideoOverlay(video: string | string[] | HTMLVideoElement, bounds: LatLngBoundsExpression, options?: VideoOverlayOptions); // 添加视频
addSvgOverlay(svgImage: string | SVGElement, bounds: LatLngBoundsExpression, options?: ImageOverlayOptions); // 添加SVG
addPolyline(latlngs: LatLngExpression[] | LatLngExpression[][], options?: PolylineOptions); // 添加折线
addPolygon(latlngs: LatLngExpression[] | LatLngExpression[][] | LatLngExpression[][][], options?: PolylineOptions); // 添加多边形
addRectangle(latLngBounds: LatLngBoundsExpression, options?: PolylineOptions); // 添加长方形
addCircle(latlng: LatLngExpression, options?: CircleOptions); // 添加圆形
addGroup(layers: Layer[], options?: LayerOptions); // 添加到组
addLayerGroup(layer: Layer, layers: Layer[], options?: LayerOptions); // 添加到层组
其他属性、方法、事件
文档地址:https://leafletjs.com/reference.html