必应映射实体集合DOM属性



是否有其他方法可以访问EntityCollection中实体的"dom"属性?

我问的原因是,当用户将地图平移/缩放到足够远时,会从DOM中移除pin,但我有一些函数可以通过向pin添加/移除类来操作pin。当pin不在DOM中时,它们不会被操纵。

我深入到了有点模糊/私有的属性pin.cm1002_er_etr,它提供了对嵌套"dom"属性的访问,但似乎根据实体的初始化顺序,数值可能会发生变化。现在我必须使用pin.cm1007_er_etr.访问它

这听起来很琐碎,但从维护角度来看,这可能是一场噩梦,因为有人要为应用程序添加/删除/重新排序实体(如果这是导致更改的原因)。

function filterRows(){
    var visibleRows = $("#table").DataTable().rows({"search" : "applied"});
    var hiddenRows = $("#table").DataTable().rows({"search" : "removed"});
    var targetGroup = ($("a.MapPushpinBase").length == _entities.PushPinsEntity.getLength()) ? "screen" : "memory";
    for(var i = 0, l1 = visibleRows[0].length; i < l1; i++){
        var row = $("#table").DataTable().row(i);
        var id = row.data().ID;
        if(!$("#"+id).hasClass("radiusPin")){
            toggleIcon(id, "show", targetGroup);
            var index = IDs.indexOf(id);
            if(index == -1 && $(row.node()).hasClass("selected")) IDs.push(id);
        }
    }
    for(var i = 0, l1 = hiddenRows[0].length; i < l1; i++){
        var row = $("#table").DataTable().row(i);
        var id = row.data().ID;
        if(!$("#"+id).hasClass("radiusPin")){
            toggleIcon(uwi, "hide", targetGroup);
            var index = IDs.indexOf(id);
            if(index > -1 && $(row.node()).hasClass("selected")) IDs.splice(index, 1);
        }
    }
    delete visibleRows, hiddenRows;
};
function toggleIcon(id, action, targetGroup){
    var dom = null;
    if(targetGroup == "screen"){
        dom = (id.split("#").length > 1) ? id : "#" + id;
    }
    else if(targetGroup == "memory"){
        for(var i = 0, l = _entities.PushPinsEntity.getLength(); i < l; i++){
            var p = _entities.PushPinsEntity.get(i);
            if(p._id == id){
                dom = p.cm1007_er_etr.dom;
            }
        }
    }
    if(action == "select"){
        $(dom).addClass("selected");
    }
    else if(action == "deselect"){
        $(dom).removeClass("selected");
    }
    else if(action == "hide"){
        $(dom).addClass("hiddenpin");
    }
    else if(action == "show"){
        $(dom).removeClass("hiddenpin");
    }
};

我认为对DOM进行这种访问是不可能的,而且如果这是一种好的方法,因为渲染引擎可能会更新,代码可能不再工作。所以从技术上讲,你可以找到一种方法来做到这一点,但我不建议使用下面的元素。

如果要在DOM元素上添加自己的类,可以在创建图钉时使用PushpinOption上的typeName属性。

请参阅MSDN:http://msdn.microsoft.com/en-us/library/gg427629.aspx

因此,这里有一种支持的方法,可以根据添加到图钉中的自定义类名来添加行为(事件、装饰…):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script type="text/javascript" charset="UTF-8" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0">
    </script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        var map = null;
        $(function() {
            $('#map').on('click', '.custom-pushpin', function() { console.log('click on custom pin') });
            // Initialize the map
            map = new Microsoft.Maps.Map($('#map').get(0), {
                credentials: "YOURKEY",
                mapTypeId: 'r',
                center: new Microsoft.Maps.Location(47.5, 2.75),
                zoom: 4
            });
            // Retrieve the location of the map center 
            var center = map.getCenter();
            // Add a pin to the center of the map
            var pin = new Microsoft.Maps.Pushpin(center, {text: '1', typeName: 'custom-pushpin'}); 
            map.entities.push(pin);
            // Add a second pin to the center of the map
            var pin = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(48.5, 4.75), {text: '2', typeName: 'custom-pushpin'}); 
            map.entities.push(pin);
        });
    </script>
</head>
<body>
    <div id="map" style="position: relative; width: 800px; height: 600px;">
    </div>
</body>
</html>

最新更新