MJB*_*MJB 1 jquery google-maps jquery-plugins
我正在使用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复制代码.感谢帮助!谢谢
我找到了一个解决方法.我在标记元素上设置了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>
我希望这有帮助.