Question

我希望在某些复选框的帮助下，按类别隐藏/显示Google地图标记和折线。我查看了其他的例子，但是我发现的其他例子有完全不同的代码，所以，当我使用javascript noob时，我无法满足我的目的。

我的代码如下所示：

我有一个数组对象（对吗？），我的位置和一些自定义数据：

var nodes = {
'node1': {
    'name': 'Node 1',
    'description': 'Description of Node 1',
    'category': 'internal-node',
    'icon': '../graphics/map-marker.png',
    'labelposition':  new google.maps.Size(0, 5),
    'lat': 55.57411194,
    'long': 12.92872047000003},
'node2': {
    'name': 'Node 2',
    'description': 'Description of Node 2',
    'category': 'external-node',
    'icon': '../graphics/map-marker.png',
    'labelposition':  new google.maps.Size(-145, -30),
    'lat': 55.57440186,
    'long': 12.928360939999948},
};

我使用jquery循环遍历每个循环并为每个循环添加一个标记。使用此代码：

var marker = new google.maps.Marker({
   position: new google.maps.LatLng(obj.lat, obj.long),
   animation : google.maps.Animation.DROP,
   icon: obj.icon,
   customInfo: obj.info,
   category: obj.category,
   map: map,
   visible: true,
   title: obj.name,
});

我引用了对象的类别。所以每个标记现在应该有一个类别。我还为我的折线设置了一些路径，介于我的位置之间。使用此代码：

var mainRoutes = [
    ["node1", "node2"],
];

function drawMainRoutes() {
    // Create traffic mainRoutes
    for(var i=0, l=mainRoutes.length; i < l; i++){
        list = mainRoutes[i];
        var paths = [];
        for(var j=0, k=list.length; j < k; j++){
            var obj = nodes[list[j]];
            paths.push(new google.maps.LatLng(obj.lat, obj.long));
        };

        // Draw polyline mainRoutes
        var path = new google.maps.Polyline({
            path: paths,
            geodesic: false,
            strokeColor: '#FFFFFF',
            strokeOpacity: 0.8,
            strokeWeight: 2
        });
        path.setMap(map)
    };
}

drawMainRoutes();

我还创建了两个复选框来控制我的两个类别：

<label><input type="checkbox" id="internal-nodes">Internal nodes/paths</label>
<label><input type="checkbox" id="external nodes">External nodes/paths</label>

那么，如果我想在复选框的帮助下按类别控制我的标记/节点的可见性，我该如何从这里开始呢？

Answer 1

循环你的JSON对象，并根据类别和选中/取消选中的框，在它们上使用.setVisible（true / false）。

Answer 2

这是一些抽象的例子，但我认为这对开始会很有帮助：

var map = {
    map: {},
    markers: {},
    init: function(){
        var curLatLng = new google.maps.LatLng(50.422956, 30.535759);
        var mapOptions = {
            zoom: 15,
            minZoom: 13,
            maxZoom: 18,
            center: currentLatLng,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            mapTypeControl: false,
            scrollwheel: false
        };
        this.map = new google.maps.Map(document.getElementById('map-container'), mapOptions);
    },
    hideMarkers: function(){
        for(var i = 0; i < this.markers.length; i++);{
              this.marker.setMap(null);
        }
    },
    showMarkers: function(){
        for(var i = 0; i < this.markers.length; i++){
            this.marker.setMap(this.map);
        }
    }
};
map.init();
var markers = {};
for(var i = 0; i < nodes.length; i++){
    markers[i] = new google.maps.Marker({
        position: new google.maps.LatLng('some latitude from node', 'some longitude from node'),
        map: map.map,
        name: 'some name from node',
        category: 'come category'
    });
    google.maps.event.addListener(markers[i], "click", function(){
        //some action
    });
}
map.markers = markers;

按类别显示/隐藏Google标记和折线，并带有复选框

2 个答案: