2012-09-02 36 views
1

我使用jQuery.ui.maps來添加標記並(希望)找到它們。使用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複製代碼。幫助表示讚賞!謝謝

+0

什麼是「devs hp」? - 順便說一下,這不是谷歌地圖API V3的語法 – Marcelo

回答

7

我找到了解決方法。我在標記元素上設置了標識和標題。根據標題或ID

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

選擇:

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

OR

$('#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> 

我希望這次他LPS。

+0

謝謝我也想過,但我想堅持「走的路」..我會盡快調查它,只要我有機會 – MJB

+0

是的它的作品,但我必須使用'標題:'我的標題',而不是標題:mytitle ..不知道你的代碼是如何工作的。 – MJB

+0

我必須第二@Tollis。我有一個確切的問題,無法通過數字ID或分配的名稱找到標記。檢查if語句中的屬性值雖然工作得很好。 – russellmania

0

vMap是一個帶有HTML 5的閃電式jQuery插件,通過發送一個簡單的JSON數據結構使Google地圖變得簡單。

https://github.com/vhugogarcia/vMap

它幫助我解決了很多問題的標記與谷歌地圖,而且還增加了對功能,如果需要上市地點。

1

看來這是3.0rc的問題。爲了解決這個問題,我發現一個解決辦法 - 你必須定義標記屬性作爲數組,並與值(S)到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); 
}); 

});