Leaflet的make(图标)点击事件的绑定，并且附加其他信息

最新推荐文章于 2025-11-05 18:57:02 发布

原创最新推荐文章于 2025-11-05 18:57:02 发布 · 7.5k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#地图

Leaflet 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一个使用jQuery实现的地图插件，该插件能够渲染地图并实现在地图上标记位置的功能。通过设置地图的视图和层级，加载自定义的地图瓦片图层，并在指定的经纬度范围内创建多个标记点。

(function ($) {
    Demo = function(element,options){
        gis = this;
        //在renderMap中传入gis对象。前几次不传发现失败，不能调用
        //protorype其他的函数。
        gis.renderMap(gis);

        //打点函数，可以写在插件内部或者外部都行
        gis.printPoint();
    }
    //渲染地图
    Demo.prototype =  {
        renderMap : function () {
            var map = gis.map = L.map('mapid',{
                renderer: L.canvas()
            });

            map.setView([30, 120], 13);
            L.tileLayer('http://172.16.1.55:7780/Map/{z}/{xd}/{yd}/{x}_{y}_{z}.png', {//http://{s}.tile.osm.org/{z}/{x}/{y}.png  172.16.1.55:7780/Map/{z}/{xd}/{yd}/{x}_{y}_{z}.png
                attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
            }).addTo(map);
        },
        //进行打点
        printPoint : function(){
            var map = gis.map;
            for (var x = 120;x<120.105;) {
                x = x + 0.005
                for (var y = 30; y < 30.1;) {
                    y = y + 0.005
                    var circle = L.circle([y, x], {radius: 20}).addTo(map);
                    var obj = {'x': x, 'y': y}
                    console.log(obj)
                    //绑定Event
                    gis.point_fire(circle, obj)
                }
            }
        },

        //点击每个点显示相应的obj的信息，而不是显示for循环的最后一次生成obj的信息
        point_fire : function (circle,obj) {
            circle.addEventListener('click',function () {
                gis.point_fire2(circle,obj)
                console.log(obj)
            })
        },

        point_fire2 : function (circle,obj) {
            console.log(obj)
        }
    }

    $.fn.Demo = function () {
        var gis = this;
        return new Demo(gis)
    }
})(jQuery)
//以上是插件代码。在页面的js标签中加入下面的代码进行调用
var gis = $('#mapid').Demo();