1

jQuery.ui.maps を使用してマーカーを追加し、(できれば) それらを見つけます。

いつものようにいくつかのマーカーを追加しました（アイコンを含めて機能します）が、タグと値を使用します。

map.gmap('addMarker', { 'icon':'themes/images/cafetaria.png',                                                            
'tag':'Mensa', 'position': position }).click(clickcb);

後で、そのタグと値を持つすべてのマーカーを見つけて非表示にしようとしましたが、何も見つかりません。

map.gmap('find', 'markers', { 'property': 'tag', 'value': 'Mensa' }, function(marker, found) {
        if(found){marker.setVisible(false);}
    });

基本的に開発者のHPからコードをコピーしたため、問題はわかりません。助けていただければ幸いです。ありがとう

4

3 に答える 3

7

回避策を見つけました。マーカー要素に ID とタイトルを設定しています。

$('#map_canvas').gmap('addMarker', {id: i, 'position': new google.maps.LatLng(cityList[i][1], cityList[i][2]), title: cityList[i][0]});

タイトルまたは ID に基づく選択:

$('#map_canvas').gmap('find', 'markers', { }, function(marker) {
    if(marker.title == markerName){marker.setVisible(false);}
});

また

$('#map_canvas').gmap('find', 'markers', { }, function(marker) {
    if(marker.id == markerId){marker.setVisible(false);}
});

以下に実際の例を示します。

<!doctype html>
<html lang="en">
   <head>
        <title>jQuery mobile with Google maps - Google maps jQuery plugin</title>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
        <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
        <script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3&sensor=false&language=en"> </script>
        <script type="text/javascript" src="http://jquery-ui-map.googlecode.com/svn/trunk/ui/min/jquery.ui.map.min.js"></script>
        <script type="text/javascript">

            var chicago = new google.maps.LatLng(41.850033,-87.6500523);
            var mobileDemo = { 'center': '41,-87', 'zoom': 7 };

            function initialize()
            {
                $('#map_canvas').gmap({ 'center': mobileDemo.center, 'zoom': mobileDemo.zoom, 'disableDefaultUI':false });
            }

            var cityList = [
                ['Chicago', 41.850033, -87.6500523, 1],
                ['Illinois', 40.797177,-89.406738, 2]
            ];

            function addMarkers()
            {
                for (var i = 0; i < cityList.length; i++) 
                {
                    var $marker = $('#map_canvas').gmap('addMarker', {id: i, 'position': new google.maps.LatLng(cityList[i][1], cityList[i][2]), title: cityList[i][0]});
                    $marker.click(function() {
                        $('#map_canvas').gmap('openInfoWindow', {'content': cityList[this.id][0]}, this);
                    });
                }
            }

            function hideMarkerByTitle(markerName)
            {
                $('#map_canvas').gmap('find', 'markers', { }, function(marker) {
                    if(marker.title == markerName){marker.setVisible(false);}
                });         
            }

            function hideMarkerById(markerId)
            {
                $('#map_canvas').gmap('find', 'markers', { }, function(marker) {
                    if(marker.id == markerId){marker.setVisible(false);}
                });         
            }

             $(document).on("pageinit", "#basic-map", function() {
                initialize();
            });

            $(document).on('click', '.add-markers', function(e) {
                e.preventDefault();
                addMarkers();
            });

            $(document).on('click', '.hide-chicago', function(e) {
                e.preventDefault();
                hideMarkerByTitle("Chicago");
                // uncomment to try by id
                //hideMarkerById(0);
            });

        </script>
    </head>
    <body>
        <div id="basic-map" data-role="page">
            <div data-role="header">
                <h1><a data-ajax="false" href="/">jQuery mobile with Google maps v3</a> examples</h1>
                <a data-rel="back">Back</a>
            </div>
            <div data-role="content">   
                <div class="ui-bar-c ui-corner-all ui-shadow" style="padding:1em;">
                    <div id="map_canvas" style="height:350px;"></div>
                </div>
                <a href="#" class="add-markers" data-role="button" data-theme="b">Add Some More Markers</a>
                <a href="#" class="hide-chicago" data-role="button" data-theme="b">Hide Chicago</a>
            </div>
        </div>      
    </body>
</html>

これが役立つことを願っています。

于 2012-09-02T20:14:58.703 に答える
1

これは 3.0rc の問題のようです。それを修正するために、回避策を見つけました - マーカー プロパティを配列として定義し、配列を値とともに find メソッドに渡す必要があります。

$('#map_canvas').gmap({'center': '42.2303, 24.7890' }).bind('init', function () {
$('#map_canvas').gmap('addMarker', { 'foo': ['bar'], 'position': '42.2303, 24.7890' });
$('#map_canvas').gmap('find', 'markers', { 'property': 'foo', 'value': ['bar'] }, function(marker, found) {
    marker.setVisible(found);
});

});

于 2014-02-09T22:13:10.433 に答える
0

vMapは、シンプルなJSONデータ構造を送信することでGoogleマップを簡単にするHTML5を備えたLightningjQueryプラグインです。

https://github.com/vhugogarcia/vMap

これは、Googleマップのマーカーの問題を解決するのに役立ちましたが、必要に応じて場所を一覧表示する機能も追加しました。

于 2012-11-30T23:39:11.260 に答える