1

いくつかのチェックボックスを使用して、Google マップのマーカーとポリラインをカテゴリ別に非表示/表示したいと考えています。私はこれの他の例をチェックしましたが、私が見つけた他の例はまったく異なるコードを持っているので、私はJavaScript初心者なので、目的に合わせることができませんでした.

私のコードは次のようになります。

位置といくつかのカスタム データを含む配列オブジェクト (右?) があります。

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();

また、2 つのカテゴリを制御するために 2 つのチェックボックスを作成しました。

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

チェックボックスを使用して、カテゴリごとにマーカー/ノードの可視性を制御したい場合、ここからどのように進めることができますか?

4

2 に答える 2

0

これはいくつかの抽象的な例ですが、始めるのに役立つと思います：

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;
于 2013-11-11T17:24:57.513 に答える
0

JSON オブジェクトをループし、カテゴリとチェックされている/チェックされていないボックスに基づいて、.setVisible(true/false) を使用します。

于 2013-11-11T16:48:55.910 に答える