场景
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、效果
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
文章由极客之音整理,本文链接:https://www.bmabk.com/index.php/post/136123.html