上文介绍了Openlayers与Vue的应用，但Openlayers还是比较重的，如果只想要轻量级的应用，推荐采用 leaflet

1、安装

npm i leaflet

2、代码

<template>
    <div>
        <!-- 地图容器 -->
        <div id="map"></div>
    </div>
</template>

<script>

    import L from "leaflet"
    import "leaflet/dist/leaflet.css"

    export default {
        name: 'LeafletMap',
        data() {
            return {
                map: null
            }
        },
        mounted() {
            // 地图初始化
            this.initMap()
        },
        methods: {
            // 使用id为map的div容器初始化地图，同时指定地图的中心点和缩放级别
            initMap() {
                let map = L.map("map", {
                    center: [30.241209765928836, 120.14260758374022], // 中心位置
                    zoom: 12, // 缩放等级
                    attributionControl: true, // 版权控件
                    zoomControl: true //缩放控件
                });
                this.map = map; // data上需要挂载
                L.tileLayer(
                    "http://wprd04.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}"
                ).addTo(map) // 加载底图
            }
        }
    }
</script>
<style scoped>
    #map {
        width: 800px;
        height: 500px;
    }
</style>

3、具体的地图API见官方文档

leafletjs.com/

以上代码都可以在Gitee中下载

gitee.com/maquebi/stu…