import map from "vue-leaflet-chinese"
import "vue-leaflet-chinese/dist/style.css"
...
createApp(App).use(map).mount("#app")

const mapoption = ref({
  center: [31.41, 120.98],
  zoom: 13,
})
<LeafletMap :option="mapoption" style="width: 500px; height: 500px">
<GdNormal/>
</LeafletMap>

const mapoption = ref({
  center: [31.41, 120.98],
  zoom: 13,
})
<LeafletMap :option="mapoption" style="width: 500px; height: 500px">
<GdSatellite/>
</LeafletMap>

const mapoption = ref({
  center: [31.41, 120.98],
  zoom: 13,
})
<LeafletMap :option="mapoption" style="width: 500px; height: 500px">
<TxNormal/>
</LeafletMap>

const mapoption = ref({
  center: [31.41, 120.98],
  zoom: 13,
})
<LeafletMap :option="mapoption" style="width: 500px; height: 500px">
<TxSatellite/>
</LeafletMap>

const mapoption = ref({
  center: [31.41, 120.98],
  zoom: 13,
})
const key = ref("your tmap token") //天地图必须设置key
<LeafletMap  :tk="key" :option="mapoption" style="width: 500px; height: 500px">
<TianNormal/>
</LeafletMap>

const mapoption = ref({
  center: [31.41, 120.98],
  zoom: 13,
})
const key = ref("your tmap token")
<LeafletMap :tk="key" :option="mapoption" style="width: 500px; height: 500px">
<TianSatellite/>
</LeafletMap>

const mapoption = ref({
  center: [31.41, 120.98],
  zoom: 13,
  crs:'baidu' //百度地图必须配置此项
})

<LeafletMap  :tk="key" :option="mapoption" style="width: 500px; height: 500px">
<BdNormal/>
</LeafletMap>

const mapoption = ref({
  center: [31.41, 120.98],
  zoom: 13,
  crs:'baidu' //百度地图必须配置此项
})
const key = ref("your tmap token")
<LeafletMap :tk="key" :option="mapoption" style="width: 500px; height: 500px">
<BdSatellite/>
</LeafletMap>

const position = reactive({
    lat:'',
    lng:''
})

const mapoption = ref({
  center: [31.41, 120.98],
  zoom: 13,
})
<LeafletMap  :option="mapoption" style="width: 500px; height: 500px">
<GdNormal/>
<Lmarker :position="position"></Lmarker>
</LeafletMap>

const latlngs = ref([
  [31.45, 120.99],
  [31.27, 121.13],
  [31.48, 121.914],
])

const mapoption = ref({
  center: [31.41, 120.98],
  zoom: 13,
})
<LeafletMap  :option="mapoption" style="width: 500px; height: 500px">
<GdNormal/>
<Lpolyline :latlngs="latlngs"></Lpolyline>
</LeafletMap>

const latlngs = ref([
  [31.45, 120.99],
  [31.27, 121.13],
  [31.48, 121.914],
])

const mapoption = ref({
  center: [31.41, 120.98],
  zoom: 13,
})
<LeafletMap  :option="mapoption" style="width: 500px; height: 500px">
<GdNormal/>
<Lpolygon :latlngs="latlngs"></Lpolygon>
</LeafletMap>

const mapoption = ref({
  center: [31.41, 120.98],
  zoom: 13,
})
<LeafletMap  :option="mapoption" style="width: 500px; height: 500px">
<GdNormal/>
<Lgroup>
    <Lmarker/>
    <Lpolyline />
    <Lpolyline/>
</Lgroup>
<Fgroup>
    <Lmarker/>
    <Lpolyline />
    <Lpolyline/>
</Fgroup>
</LeafletMap>

const mapref = ref()
const markerref = ref()
mapref.value.$$instance
markerref.value.$$instance
...

<LeafletMap ref="mapref"  :option="mapoption" style="width: 500px; height: 500px">
<GdNormal/>
<Lgroup>
    <Lmarker ref="markerref"/>
    <Lpolyline />
    <Lpolyline/>
</Lgroup>
<Fgroup>
    <Lmarker/>
    <Lpolyline />
    <Lpolyline/>
</Fgroup>
</LeafletMap>