場景

Leaflet快速入門與加載OSM顯示地圖：

Leaflet快速入門與加載OSM顯示地圖_BADAO_LIUMANG_QIZHI的博客-CSDN博客

如果是在Vue中怎樣實現。

注：

博客：
BADAO_LIUMANG_QIZHI的博客_霸道流氓氣質_CSDN博客-C#,SpringBoot,架構之路領域博主
關注公眾號
霸道的程序猿
獲取編程相關電子書、教程推送與免費下載。

實現

1、安裝leaflet

npm install leaflet --save

2、代碼實現基本同上

? <template><div id="map" class="map"></div> </template><script> import 'leaflet/dist/leaflet.css' import L from 'leaflet' export default {name: "helloLeafletLoadOSM",data() {return {map: null,OSMUrl: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"};},mounted() {this.initMap();},methods: {initMap() {this.map = L.map("map");this.map.setView([34.03, -118.15], 13);let tileLayer = L.tileLayer(this.OSMUrl)tileLayer.addTo(this.map)},}, }; </script><style scoped> .map {width: 100%;height: 400px; } </style>?

3、效果

?

總結

以上是生活随笔為你收集整理的Vue+Leaflet实现加载OSM显示地图的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。