我正在为我的Google Map使用这个 jQuery 插件。
我有一个小表格,用于过滤地图上的标记。
标记是使用$('#map_canvas').gmap('addMarker', {...})
插件的函数创建的,使用该函数创建标记时我可以传递的属性之一是bounds:true
. 它的作用是 - 当所有标记都被创建和显示时,地图应该放大到地图上所有标记的边界。
问题是- 由于某种原因,当我过滤(按提交按钮)时,地图不会放大到新标记的边界。它只是停留在原来的位置。
这是为什么?如何使其放大到新标记的范围?
jQuery :
// when map is initialized, plot all the markers
$('#map_canvas').gmap(mapOptions).bind('init', function(){
$.getJSON('myscript.php', function(json){
var theMarkers = json;
$.each(theMarkers, function(i, val) {
$('#map_canvas').gmap('addMarker', { 'position': new google.maps.LatLng(val.Lat, val.Lng), 'bounds':true, 'icon':'myicon.png' } ).click(function(){
$('#map_canvas').gmap('openInfoWindow', { 'content': '<h1>'+val.Name+'</h1>'+'<h2 style="color: grey">'+val.Address+'</h2><p style="color: green">'+val.Telephone+'</p>' }, this);
});
});
});
});
// upon clicking submit button - clear old markers and plot newly filtered ones on the map
$('#myform').on('submit', function(e) {
$('#map_canvas').gmap('clear', 'markers');
e.preventDefault();
var myData = $('#myform').serializeArray();
$.getJSON('myscript.php', myData, function(json){
var theMarkers = json;
$.each(theMarkers, function(i, val) {
$('#map_canvas').gmap('addMarker', { 'position': new google.maps.LatLng(val.Lat, val.Lng), 'bounds':true, 'icon':'myicon.png' } ).click(function(){
$('#map_canvas').gmap('openInfoWindow', { 'content': '<h1>'+val.Name+'</h1>'+'<h2 style="color: grey">'+val.Address+'</h2><p style="color: green">'+val.Telephone+'</p>' }, this);
});
});
});
});