来自REST服务的传单映射添加自定义标记

时间:2014-12-20 05:28:20

标签: javascript leaflet

我使用以下方法成功提取了SharePoint 2013列表:

function LeafletDemoList(){
$.ajax({ 
    url: "SITEURL/_api/Web/Lists/GetByTitle('Leaflet%20Demo%20List')/items", 
    type: "GET",
    headers: {"accept": "application/json;odata=verbose"},
    success: function(data){
        $.each(data.d.results, function(index, item){  
                  var mapMarker = "{icon:" + item.Marker_x0020_Type.replace(/ /g,'') + "}";
                  var latlng = item.Latitude_x002c_Longitude.split(",");
                  L.marker([latlng[0],latlng[1]],mapMarker).addTo(map).bindPopup(item.Title);
        });
    },
    error: function(error){
        alert(JSON.stringify(error));
    }
});
}

自定义地图标记未显示。我可以看到该字段被正确拉入...(即森林显示警报(mapMarker)测试完成时)。小册子蓝色标记显示正常,个别自定义标记显示正常:

L.marker([latlng[0],latlng[1]],{icon:Forest}).addTo(map).bindPopup(item.Title);

var Forest = L.icon({
    iconUrl: 'SITEURL/SiteAssets/map-assets/images/forest.png',
    iconSize:     [21, 23], 
    popupAnchor:  [0, -8] 
});

但是当我尝试使用我的变量从列表中拉出它们时,只有蓝色标记显示:

L.marker([latlng[0],latlng[1]],MapMarker).addTo(map).bindPopup(item.Title);

我试图用几种不同的方式写出来:

L.marker([latlng[0],latlng[1]],{icon:item.Marker_x0020_Type.replace(/ /g,'')}).addTo(map).bindPopup(item.Title);

L.marker([latlng[0],latlng[1]],"{icon:"+item.Marker_x0020_Type.replace(/ /g,'')+"}").addTo(map).bindPopup(item.Title);

我在这里做错了什么?

编辑:我得到一个未捕获的TypeError:undefined不是一个函数。

item.Marker_x0020_Type等于仅包含以下内容之一的仅剥离文本字符串:区域其他我正在使用.replace(/ / g,'')确定没有多余的空格。

1 个答案:

答案 0 :(得分:1)

如果您想使用字符串引用您之前设置的变量,可以使用括号表示法:

var foo = 'my string';
var bar = 'foo';

// The following all output 'my string' to your console.
console.log(foo);
console.log(this['foo']);
console.log(this[bar]);

在代码中使用它:

var icons = {
    'Forest': L.icon({
        iconUrl: 'SITEURL/SiteAssets/map-assets/images/forest.png',
        iconSize:     [21, 23], 
        popupAnchor:  [0, -8] 
    }),
    'Region': L.icon({
        iconUrl: 'SITEURL/SiteAssets/map-assets/images/region.png',
        iconSize:     [21, 23], 
        popupAnchor:  [0, -8] 
    }),
    'Other': L.icon({
        iconUrl: 'SITEURL/SiteAssets/map-assets/images/other.png',
        iconSize:     [21, 23],
        popupAnchor:  [0, -8] 
    })
}

var iconName = item.Marker_x0020_Type.replace(/ /g,''); // Forest
var markerOptions = {icon: icons[iconName]}; // the same as calling icons['Forest']
var latlng = item.Latitude_x002c_Longitude.split(",");
L.marker([latlng[0],latlng[1]], markerOptions).addTo(map).bindPopup(item.Title);