I followed the instructions from https://www.npmjs.com/package/vue2-leaflet https://vue2-leaflet.netlify.app/quickstart/#installation
main.js import 'leaflet/dist/leaflet.css';
MyComponent.vue
<template>
..
<l-map
v-if="showMap"
:zoom="zoom"
:center="center"
:options="mapOptions"
style="height: 80%"
@update:center="centerUpdate"
@update:zoom="zoomUpdate"
@ready="doSomethingOnReady"
>
<l-tile-layer
:url="url"
:attribution="attribution"
/>
<l-marker :lat-lng="withPopup">
<l-popup>
<div @click="innerClick">
I am a popup
<p v-show="showParagraph">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque
sed pretium nisl, ut sagittis sapien. Sed vel sollicitudin nisi.
Donec finibus semper metus id malesuada.
</p>
</div>
</l-popup>
</l-marker>
<l-marker :lat-lng="withTooltip">
<l-tooltip :options="{ permanent: true, interactive: true }">
<div @click="innerClick">
I am a tooltip
<p v-show="showParagraph">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque
sed pretium nisl, ut sagittis sapien. Sed vel sollicitudin nisi.
Donec finibus semper metus id malesuada.
</p>
</div>
</l-tooltip>
</l-marker>
</l-map>
...
</template>
import latLng from 'leaflet'; // https://vue2-leaflet.netlify.app/quickstart/#installation
import { LMap, LTileLayer, LMarker, LPopup, LTooltip } from 'vue2-leaflet';
components: {
LMap,
LTileLayer,
LMarker,
LPopup,
LTooltip
}
data: () => ({
zoom: 13,
center: latLng(47.41322, -1.219482),
url: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
attribution:
'© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
withPopup: latLng(47.41322, -1.219482),
withTooltip: latLng(47.41422, -1.250482),
currentZoom: 11.5,
currentCenter: latLng(47.41322, -1.219482),
showParagraph: false,
mapOptions: {
zoomSnap: 0.5
},
showMap: false
}
Actual Results
vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in data(): "TypeError: leaflet__WEBPACK_IMPORTED_MODULE_32___default(...) is not a function"
found in
<MyComponent> at src/views/apps/deal/MyComponent.vue <VMain> <VApp> <Layout> at src/layouts/full-layout/Layout.vue <VApp> <App> at src/App.vue <Root>
→ seems latLng function is unknown
The import line:
import latLng from 'leaflet';
Should have been a named import instead:
import { latLng } from 'leaflet';
(Note the curly braces)
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.