场景

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显示地图的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。