leaflet+vue实现地图标记

引入leafletjs

yarn add leaflet

main.js中挂载

import * as L from 'leaflet'
import 'leaflet/dist/leaflet.css'

Vue.L = Vue.prototype.$L = L

具体实现

<template>
    <div id="map" class="map"></div>
</template>
<script>
import { Component, Prop，Vue } from 'vue-property-decorator';
import mapJson from "../../json/map.json";

@Component()
export default class Map extends Vue {
    mounted () {
        this.dataHandle()
    }
    dataHandle () {
        // 获取到所有的列名
        let key = Object.keys(mapJson.visuals[0].data)
        let data = []
        // 将{[]}形式更改为[{}]
        for (let i = 0; i < mapJson.visuals[0].data[key[0]].length; i++) {
            let list = {}
            key.forEach((item) => {
                list[item] = mapJson.visuals[0].data[item][i]
            })
            data.push(list)
        }
        let keys = key.filter(item => item !== 'latitude' && item !== 'longitude')
        this.initDateNew(data, keys)

    }
    // 地图主要代码如下：
    initDateNew (data, key) {
        // 配置地图选项
        var mapOptions = {
            center: [14.502196, 52.145086],
            zoom: 6,
            minZoom: 3,
            maxZoom: 9
        }
        // 创建地图对象
        var map = new L.map('map', mapOptions)
        // 创建图层对象
        var layer = new L.TileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png',)
        // 在地图上添加图层
        map.addLayer(layer)

        data.forEach(item => {
            let list = {}
            key.forEach((items) => {
                list[items] = item[items]
            })
            key.forEach((items, i) => {
                let color = ['#f03', '#22bccd']
                let radius = item[items] * 50
                var circle = L.circle([item.longitude, item.latitude], {
                    color: 'inherit',
                    fillColor: color[i],
                    fillOpacity: 0.5,
                    radius: radius
                }).addTo(map)
                let popupContent = ''
                for (let i in list) {
                    popupContent = popupContent +
                        '<p>' + '<b>' + i + ':</b>' + list[i] + '</p>'
                }
                circle.bindPopup(popupContent)
            })
        });

    }
}
</script>
<style lang="scss" scoped>
.map {
    height: 800px;
}
</style>

所需map.json数据

{
  "visuals": [
    {
        "data": {
            "discount": [
                "100",
                "200",
                "300",
                "500",
                "600"
            ],
            "quantity": [
                "150",
                "160",
                "170",
                "180",
                "90"
            ],
            "longitude":[
              "14.502196",
              "17.644285",
              "14.69995",
              "15.930418",
              "16.325926"
            ],
            "latitude":[
              "52.145086",
              "51.670648",
              "50.7206",
              "52.346885",
              "52.867274"
            ]
        }
    }
]

    
}

实现效果如下：