leaflet在天地图上添加poi兴趣点

前言

书接上节,在上一篇博客加载的天地图的基础上,加载poi兴趣点。

上节传送:使用leaflet在html中加载天地图且去掉左上角的缩放图标以及右下角的logo

一、加载poi的方法

leaflet通过 L.marker 方法用来加载poi,我们只需填入poi的经纬度即可创建poi对象,然后把创建的poi对象添加到地图上。

L.marker([22.84901, 108.29784]).addTo(map);  //将这个poi添加到地图上(注意顺序是:纬度,经度)

会使用leaflet的默认图标进行显示,如图:
在这里插入图片描述

二、改变图标样式

我们可以使用自己的图标来标识poi。首先使用 L.icon 方法,创建一个icon对象,将icon对象当成参数传递到L.marker方法中用来创建poi对象即可。

const myicon = L.icon({
        iconUrl: "./icons/favicon.ico",  //图标地址
        iconSize: [30, 30]  //图标大小[宽, 高]
    })

L.marker([22.84901, 108.29784], {icon: myicon}).addTo(map);  //将这个poi添加到地图上

效果如图:
在这里插入图片描述

三、批量加载poi

我这里自己模拟一些poi数据,方便测试,每一条poi数据包含名称、经度、纬度、类型,数据如下:

var poi = [
        {name: "希望小学", lon: "108.29784", lat: "22.84901", type: ""},
        {name: "蜜雪冰城", lon: "109.24071", lat: " 23.73236", type: ""},
        {name: "天猫超市", lon: "109.43442", lat: "24.33196", type: ""},
        {name: "海底捞", lon: "110.30594", lat: "25.28450", type: ""}
    ];

通过forEach方法来遍历poi数据,实现批量加载poi兴趣点。

    var poi = [
        {name: "希望小学", lon: "108.29784", lat: "22.84901", type: ""},
        {name: "蜜雪冰城", lon: "109.24071", lat: " 23.73236", type: ""},
        {name: "天猫超市", lon: "109.43442", lat: "24.33196", type: ""},
        {name: "海底捞", lon: "110.30594", lat: "25.28450", type: ""}
    ];
    //更改默认的poi图标
    const myicon = L.icon({
        iconUrl: "./icons/favicon.ico",  //图标地址
        iconSize: [30, 30]  //图标大小[宽, 高]
    })
    //批量增加
    poi.forEach((p) => {
        L.marker([p.lat, p.lon], {icon: myicon}).addTo(map);  //将这个poi添加到地图上
    });

效果如图:
在这里插入图片描述

四、给poi添加事件弹窗

通过poi对象的bindPopup方法,可以实现点击某个poi图标时,弹出弹窗显示信息。

var poi = [
        {name: "希望小学", lon: "108.29784", lat: "22.84901", type: ""},
        {name: "蜜雪冰城", lon: "109.24071", lat: " 23.73236", type: ""},
        {name: "天猫超市", lon: "109.43442", lat: "24.33196", type: ""},
        {name: "海底捞", lon: "110.30594", lat: "25.28450", type: ""}
    ];
    //更改默认的poi图标
    const myicon = L.icon({
        iconUrl: "./icons/favicon.ico",  //图标地址
        iconSize: [30, 30]  //图标大小[宽, 高]
    })
    //批量增加
    poi.forEach((p) => {
        L.marker([p.lat, p.lon], {icon: myicon}).bindPopup('<div>' + p.name + '</div>').addTo(map);  //将这个poi添加到地图上
    });

效果如图:
在这里插入图片描述文章来源地址https://uudwc.com/A/BnYMv

原文地址:https://blog.csdn.net/qq_47188967/article/details/131684326

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请联系站长进行投诉反馈,一经查实,立即删除!

h
上一篇 2023年07月13日 09:36
下一篇 2023年07月13日 09:41