Vue3+leaflet 浏览器端地图服务

keila7

于 2022-12-12 10:17:28 发布

阅读量1.7k

点赞数 1

CC 4.0 BY-SA版权

文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/weixin_43536702/article/details/128283013

首先，在.vue文件中，导入leaflet包。

npm install leaflet就不说了，其次：

<script>
import L from "leaflet"
import "leaflet/dist/leaflet.css"
</script>

添加地图容器：

<div id="map"></div>

添加样式：

#map {
  width: 100%;
  height: 450px;
  z-index: 999999;
}

再在脚本中添加地图服务：

<script>
export default {
    mounted(){
        const map = L.map('map').setView([26.10,119.33],12)
        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            maxZoom: 15,
            attribution: '© OpenStreetMap'
        }).addTo(map)
    },
}
</script>

添加完成：