【问题标题】:How to update and generate markers on a Leaflet map?如何在 Leaflet 地图上更新和生成标记?
【发布时间】:2013-05-07 12:52:01
【问题描述】:

我刚刚发现了 Leaflet,将使用它而不是 Google 地图。我有一个 API,我希望从中生成和更新地图标记(否则,我将有多个标记)。我在这里有一个小提琴http://goo.gl/rI5YH,我已经做了一段时间了。问题是我似乎无法修复从 API 获取 JSON,然后更新地图并在其上放置标记的函数。我有一堆代码,所以请看我附加的小提琴:http://goo.gl/rI5YH

【问题讨论】:

    标签: jquery ajax json api map


    【解决方案1】:

    Here 是答案,由于跨域限制,我无法进行 Ajax 调用,所以我在代码中实例化了你的 json,但无论如何这都是微不足道的。

    这里是修改后的 JS

    init(); //Calls the "grab my locayion" funcyion
    function init() {
        var map = L.map('map', {
            center: [51.505, -0.09],
            zoom: 13
        })
    
        L.tileLayer('http://{s}.tile.cloudmade.com/1fa9625d371549a298938509a2eac256/997/256/{z}/{x}/{y}.png').addTo(map);
    
    
    
    var drivers = 
         [{
                "name": "Jack Billström",
                "profileId": "3",
                "facebook_id": "100000650223192",
                "email": "jack@codele.se",
                "phone": "727396760",
                "kikId": "jackiboi95",
                "currentLat": "62.457201",
                "currentLon": "17.350931",
                "isDriver": "1"
            }, {
                "name": "John Doe",
                "profileId": "2",
                "facebook_id": "0",
                "email": "johndoe@codele.se",
                "phone": "700000000",
                "kikId": "johndoe",
                "currentLat": "62.442671",
                "currentLon": "17.338829",
                "isDriver": "1"
            }, {
                "name": "Andreas Ekström",
                "profileId": "1",
                "facebook_id": "didair",
                "email": "didair@msn.com",
                "phone": "739620011",
                "kikId": "didair",
                "currentLat": "62.457201",
                "currentLon": "17.350931",
                "isDriver": "1"
            }
        ];
    for (var i=0;i<drivers.length;i++)
    {
        var driver=drivers[i];
      var m = L.marker(new L.LatLng(driver.currentLat,driver.currentLon)).addTo(map)
                .bindPopup("<center><b>"+driver.name +"</b></center>").openPopup();
    }
    
    }
    // API-URL: http://blackcab.didair.se/api/drivers
    

    【讨论】:

    • 谢谢@varun!救命稻草!
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2020-09-22
    • 2018-08-09
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2019-08-16
    • 2022-09-26
    相关资源
    最近更新 更多