前言
本章使用Leaflet的vue2-leaflet或者vue-leaflet插件方式實現vue數據綁定地圖數據,實現地圖標記物與vue數據的雙向聯動更新,以及鼠標經過標記物顯示提示框功能。
實現效果演示
vue如何使用Leaflet
-
vue2如何使用:《Leaflet入門,如何使用vue2-leaflet實現vue2雙向綁定式的使用Leaflet地圖,以及初始化后拿到leaflet對象,方便調用leaflet的api》
-
vue3如何使用:《Leaflet入門,如何使用vue-leaflet實現vue3雙向綁定式的使用Leaflet地圖》
vue2和vue3使用leaflet的區別只在于初始化變量時data和setup方式的區別,因此文章中所有代碼只使用vue2方式進行展現,vue3需要讀者手動遷移到setup方式。
實現功能
- vue數據與地圖數據雙向綁定更新