react + Leaflet初始化

梅花三

已于 2022-09-16 10:27:49 修改

阅读量496

点赞数

分类专栏： react leaflet 文章标签： leaflet

于 2022-09-14 20:22:21 首次发布

本文链接：https://blog.csdn.net/weixin_43794073/article/details/126859602

版权

本文展示了如何在React应用中结合Leaflet库创建地图的初始设置，包括展示地图的基本效果以及提供源代码示例。

摘要由CSDN通过智能技术生成

效果

在这里插入图片描述

源码

import { useState, useEffect, useRef } from 'react'

import L from 'leaflet'
// 不引入样式文件地图会错乱或不显示
import 'leaflet/dist/leaflet.css'
// 使用默认marker图标报错找不到，手动引入图片
import icon from 'leaflet/dist/images/marker-icon.png'
import iconShadow from 'leaflet/dist/images/marker-shadow.png'

const DefaultIcon = L.icon({
    iconUrl: icon,
    shadowUrl: iconShadow
})

// 挂在到默认属性
L.Marker.prototype.options.icon = DefaultIcon

const Leaflet = () => {
    const [map, setMap] = useState()
    const mapRef = useRef()

    useEffect(() => {
        if(map) return
        // 创建地图
        const tempMap = L.map(mapRef.current, {
            // center：地图初始化时的中心点位置，坐标数组形式时，下标0是纬度，下标1是经度
            center: [39,