Google地图V3可见标记上的fitBounds [英] Google Maps V3 fitBounds on visible markers
本文介绍了Google地图V3可见标记上的fitBounds的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
数组定义了标题，类别，lat /长和href。它将所有标记添加到地图中，但仅显示第一个类别。当你点击其他cetegories它也会显示这些。
我可以让fitBounds在其他更小的例子上工作，它只需要在初始加载时fitBounds，但现在我每当我显示/隐藏标记时，我都想要fitBounds。
任何建议都可以使用。
function initialize（）{
var markers = new Array（）;
var locations = [
['Ness Country Park'，''，'walking'，54.933402，-7.197418，/ local-activities / specific / ness-country-park]，
['Learmount Forest'，''，'walking'，54.862672，-7.085495，/ local-activities / specific / learmount-forest]，
['Muff Glen'，'Muff Glen Forest坐落于一个山谷，就在埃格林顿外面。 '，'walking'，55.029472，-7.170124，/ local-activities / specific / muff-glen]，
['Banagher Forest'，''，'walking'，54.893855，-7.020693，/ local
['Binevenagh Forest'，''，'walking'，55.083549，-6.901131，/ local-activities / specific / binevenagh-forest]，
['17世纪城墙'，''，'探索'，54.997666，-7.319770，/ local-activities / specific / 17世纪城墙]，
['学徒男孩纪念堂' ，'探索'，54.995339，-7.323890，/ local-activities / specific / apprentice-boys-memorial-hall]，
['The Bogside Artists'，''，'explore'，54.998466，-7.325177 ，/ local-activities / specific / the-bogside-artists]，
['福伊尔谷铁路博物馆'，''，'探索'，54.991154，-7.321572，/ local-activities / specific / foyle -valley-railway-museum]，
[' Gasbury遗产中心'，''，'探索'，54.989923，-7.333674，/ local- activities / specific / gasyard-heritage-center]，
['The Guildhall'，''，'explore' 54.996053，-7.320800，/ local-activities / specific / the-guildhall]，
['港口博物馆'，''，'探索'，54.998269，-7.319427，/ local-activities / specific / harbor '博物馆免费德里'，''，'探索'，54.997099，-7.326121，/本地活动/具体/博物馆自由 - 德里]，
['Riverwatch水族馆和游客中心'，''，'探索'，54.988950，-7.317538，/当地活动/具体/河流观察 - 水族馆和游客中心]]，
['圣奥古斯丁教会'，'，'探索'，54.994736，-7.324040，/ local-activities / specific / st-augustines-church]，
['圣哥伦布大教堂'，''，'探索'，54.994564 ，-7.322345，/ local-activities / specific / st-c奥伦布斯大教堂]，
['圣哥伦布教堂塔楼'，''，'探索'，55.010132，-7.330992，/本地活动/特定/圣哥伦巴教堂塔楼]]，
['Tower Museum'，''，'explore'，54.997112，-7.320328，/ local-activities / specific / tower-museum]，
['工作室博物馆'，''，'探索' ，54.994995，-7.305071，/ local-activities / specific / workhouse-museum]，
['Hezlett House'，''，'explore'，55.161697，-6.787148，/ local-activities / specific / hezlett-house]，
['Mussenden Temple& 'Springhill House'，'''，''''''，'探索'，54.685615，-6.656857，/ local-activities / specific / springhill-house]，
['Fort Dunree'，''，'explore'，55.196691，-7.547607，/ local-activities /特定/堡垒dunree]，
['巴伦顶级趣味农场'，''，'探索'，54.856497，-7.335434，/ local-activities / specific / barron-top-fun-farm]，
['Ulster American Folk Park'，''，'explore'，54.587973，-7.377191，/ local-activities / specific / ulster-american-folk-park]，
[Wellbrook Beetling磨坊'，'''探索'，54.651366，-6.836071，/ local-activities / specific / wellbrook-beetling-mill]，
['Claudy Country Park'''''cycling'，54.911868 ，-7.151756，/ local-activities / specific / claudy-country-park ]，
['Faughan Valley Cycle Route'，''，'cycling'，54.981797，-7.337022，/ local-activities / specific / faughan-valley-cycle-route]，
[ Foyle Valley Cycle Route'，''，'cycling'，55.001530，-7.321208，/ local-activities / specific / foyle-valley-cycle-route-]，
['皇家波特拉什高尔夫俱乐部''' '，'golfing'，55.199823，-6.634820，/ local-activities / specific / royal-portrush-golf-club]，
['Porstewart高尔夫俱乐部'，'''高尔夫'，55.172149， - 6.724534/ local-activities / specific / porstewart-golf-club]，
['Castlerock高尔夫俱乐部'，''''golfing'，55.165945，-6.785645，/ local-activities / specific / castlerock - 'golf-club-]，
['Cregan Country Park'，''，'family'，54.999841，-7.343888，/ local-activities / specific / cregan-country-park]，
['Riverwatch Aquarium'，''，'family'，54.988852，-7.3 17495，/ local-activities / specific / riverwatch-aquarium]，
['Far&野生探险活动'，''，'家庭'，55.048369，-7.276855，/本地活动/特定/远 - 冒险活动]，
['Brunswick Cinebowl'，''， '家庭'，55.013008，-7.324448，/ local-activities / specific / brunswick-cinebowl]，
['Campsie Karting'，''，'family'，55.036076，-7.196903，/ local-activities /特定/卡普西卡丁车]，
['Barron Top Fun Farm'，''，'family'，54.856497，-7.335434，/ local-activities / specific / barron-top-fun-farm-1 ]，
['Ulster American Folk Park'，''，'family'，54.587973，-7.377191，/ local-activities / specific / ulster-american-folk-park-1]]，
['巨人堤道'，''，'家庭'，55.233317，-6.518154，/本地活动/具体/巨人堤道]]，
['Carick-a-Rede Rope Bridge'，''' ，'family'，55.237282，-6.351643，/ local-activities / specific / carick-a-rede-ro
['Mussenden Temple'，''，'family'，55.165410，-6.818218，/ local-activities / specific / mussenden-temple]
];
//设置Google地图
var map = new google.maps.Map（document.getElementById（'map-canvas'），{
zoom：15，
center：new google.maps.LatLng（55.013431，-7.314148），
mapTypeId：google.maps.MapTypeId.ROADMAP
}）;
//将使用InfoBox，因此不需要InfoWindow
// var infowindow = new google.maps.InfoWindow（）;
//设置阴影选项
var shadow = new google.maps.MarkerImage（'images / marker-shadow.png'，
google.maps.Size（77.0，
new google.maps.Point（0，0），
new google.maps.Point（22.0，62.0）
）;
var marker，i;
for（var i = 0; i< locations.length; i ++）{
console.log（locations [i] [3]，locations [I] [4]）;
$ b（i = 0; i< locations.length; i ++）{
marker = new google.maps.Marker（{
位置：new google.maps.LatLng（位置[i] [3]，位置[i] [4]），
map：地图，
shadow：影子，
图标：' images / map _'+ locations [i] [2] +'_ image.png'
}）;
markers.push（marker）;
//为InfoBox内容创建div
var boxText = document.createElement（div）;
google.maps.event.addListener（marker，'click'，（function（marker，i）{
return function（）{
//样式InfoBox内容
boxText.style.cssText =border：none 0; margin-top：8px; background：#fff; padding：8px; border：1px solid＃877856;;
boxText.innerHTML = locations [i] [0] +< br />+ locations [i] [2] +< br />+ locations [i] [1] +< img src ='images / tipbox.png '; class ='infobox-arrow'/>;
//删除关闭盒错误修复
$（。infobox-close）。remove（）;
//设置信息框选项
var myOptions = {
content：boxText
，disableAutoPan：false
，maxWidth：0
，pixelOffset：new google。 maps.Size（-140，-180）
，zIndex：null
，boxStyle：{
opacity：1
，width：280px
}
，closeBoxMargin：12px 7px 0 0
，closeBoxURL：http：/ /www.google.com/intl/zh_CN/mapfiles/close.gif
，infoBoxClearance：new google.maps.Size（1，1）
，isHidden：false
，窗格： floatPane
，enableEventPropagation：false
};
//将地图移动到标记中心
map.setCenter（marker.getPosition（））;
//将信息框附加到相关标记
var ib = new InfoBox（myOptions）;
ib.open（map，marker）;
//点击地图图块时关闭InfoBox
$（canvas）。click（function（）{
ib.close（map，marker）;
}）;
}
}）（marker，i））;
};
//显示特定类别的所有标记，并确保复选框被选中
function show（category）{
for（var i = 0; i< ; locations.length; i ++）{
if（locations [i] [2] == category）{
markers [i] .setVisible（true）;
$ b //隐藏特定类别的所有标记并确保复选框被清除
function hide（category）{
for（var i = 0; i< locations.length; i ++）{
if（locations [i] [2] == category）{
markers [i] .setVisible（false） ;
$ b //最初显示或隐藏类别
show（walking）;
hide（打高尔夫球）;
hide（family）;
hide（explore）;
hide（cycling）;
//显示/隐藏类别标记
$（＃activities .checkbox）。click（function（）{
var cat = $（this） .attr（value）;
//如果选中
if（$（this）.is（：checked））
{
show（cat）;
}
else
{
hide（cat）;
}
}）;
};
//执行函数onload
window.load = initialize（）;
解决方案
$ c> show 函数，我为你创建了自己的小提琴，演示了如何从3个标记数组中为2个标记设置可见性，以及fitBounds仅用于这些标记：
由于代码现在可以看到，在你的情况下，你可以在 show（）之后独立运行 fitBoundsToVisibleMarkers（）方法，并且 hide（）方法。例如：
函数fitBoundsToVisibleMarkers（）{
var bounds = new google.maps.LatLngBounds（ ）; （标记[i] .getVisible（））{
bounds.extend（标记[i]）的
（var i = 0; i< markers.length; i ++） i] .getPosition（））;
}
}
map.fitBounds（bounds）;
$ / code> 并且您的代码执行此操作：
function show（category）{
for（var i = 0; i< locations.length; i ++）{
if（位置[i] [2] ==类别）{
markers [i] .setVisible（true）;
}
}
//更新视图中的边界
fitBoundsToVisibleMarkers（）;
函数hide（category）{
for（var i = 0; i< locations.length; i ++）{
if（locations [i] [ 2] ==类别）{
markers [i] .setVisible（false）;
}
}
//更新视图中的边界
fitBoundsToVisibleMarkers（）;
}
Finding it hard to get clear information on this but what I am trying to achieve is fitBounds on visible markers.
The Array defines the title, category, lat/long and href. It adds all markers to the map but only shows the first category. When you click on other cetegories it will show those as well.
I can get fitBounds to work on other smaller examples where it just needs to fitBounds on inital load but now I want to fitBounds everytime I show/hide markers.
Any advice appreciated.
function initialize() {
var markers = new Array();
var locations = [
['Ness Country Park', '', 'walking', 54.933402, -7.197418, "/local-activities/specific/ness-country-park"],
['Learmount Forest', '', 'walking', 54.862672, -7.085495, "/local-activities/specific/learmount-forest"],
['Muff Glen', 'Muff Glen Forest is nestled in a valley, just outside Eglinton. ', 'walking', 55.029472, -7.170124, "/local-activities/specific/muff-glen"],
['Banagher Forest', '', 'walking', 54.893855, -7.020693, "/local-activities/specific/banagher-forest"],
['Binevenagh Forest', '', 'walking', 55.083549, -6.901131, "/local-activities/specific/binevenagh-forest"],
['17th Century Walls', '', 'explore', 54.997666, -7.319770, "/local-activities/specific/17th-century-walls"],
['Apprentice Boys Memorial Hall', '', 'explore', 54.995339, -7.323890, "/local-activities/specific/apprentice-boys-memorial-hall"],
['The Bogside Artists', '', 'explore', 54.998466, -7.325177, "/local-activities/specific/the-bogside-artists"],
['Foyle Valley Railway Museum', '', 'explore', 54.991154, -7.321572, "/local-activities/specific/foyle-valley-railway-museum"],
['Gasyard Heritage Centre', '', 'explore', 54.989923, -7.333674, "/local-activities/specific/gasyard-heritage-centre"],
['The Guildhall', '', 'explore', 54.996053, -7.320800, "/local-activities/specific/the-guildhall"],
['Harbour Museum', '', 'explore', 54.998269, -7.319427, "/local-activities/specific/harbour-museum"],
['Museum of Free Derry', '', 'explore', 54.997099, -7.326121, "/local-activities/specific/museum-of-free-derry"],
['Riverwatch Aquarium and Visitor Centre', '', 'explore', 54.988950, -7.317538, "/local-activities/specific/riverwatch-aquarium-and-visitor-centre"],
['St Augustines Church', '', 'explore', 54.994736, -7.324040, "/local-activities/specific/st-augustines-church"],
['St Columbs Cathedral', '', 'explore', 54.994564, -7.322345, "/local-activities/specific/st-columbs-cathedral"],
['St Columbas Church Tower', '', 'explore', 55.010132, -7.330992, "/local-activities/specific/st-columbas-church-tower"],
['Tower Museum', '', 'explore', 54.997112, -7.320328, "/local-activities/specific/tower-museum"],
['Workhouse Museum', '', 'explore', 54.994995, -7.305071, "/local-activities/specific/workhouse-museum"],
['Hezlett House', '', 'explore', 55.161697, -6.787148, "/local-activities/specific/hezlett-house"],
['Mussenden Temple & Downhill Demense', '', 'explore', 55.166404, -6.819849, "/local-activities/specific/mussenden-temple-and-downhill-demense"],
['Springhill House', '', 'explore', 54.685615, -6.656857, "/local-activities/specific/springhill-house"],
['Fort Dunree', '', 'explore', 55.196691, -7.547607, "/local-activities/specific/fort-dunree"],
['Barron Top Fun Farm', '', 'explore', 54.856497, -7.335434, "/local-activities/specific/barron-top-fun-farm"],
['Ulster American Folk Park', '', 'explore', 54.587973, -7.377191, "/local-activities/specific/ulster-american-folk-park"],
['Wellbrook Beetling Mill', '', 'explore', 54.651366, -6.836071, "/local-activities/specific/wellbrook-beetling-mill"],
['Claudy Country Park', '', 'cycling', 54.911868, -7.151756, "/local-activities/specific/claudy-country-park"],
['Faughan Valley Cycle Route', '', 'cycling', 54.981797, -7.337022, "/local-activities/specific/faughan-valley-cycle-route"],
['Foyle Valley Cycle Route ', '', 'cycling', 55.001530, -7.321208, "/local-activities/specific/foyle-valley-cycle-route-"],
['Royal Portrush Golf Club', '', 'golfing', 55.199823, -6.634820, "/local-activities/specific/royal-portrush-golf-club"],
['Porstewart Golf Club', '', 'golfing', 55.172149, -6.724534, "/local-activities/specific/porstewart-golf-club"],
['Castlerock Golf Club ', '', 'golfing', 55.165945, -6.785645, "/local-activities/specific/castlerock-golf-club-"],
['Cregan Country Park', '', 'family', 54.999841, -7.343888, "/local-activities/specific/cregan-country-park"],
['Riverwatch Aquarium', '', 'family', 54.988852, -7.317495, "/local-activities/specific/riverwatch-aquarium"],
['Far & Wild Adventure Activities', '', 'family', 55.048369, -7.276855, "/local-activities/specific/far-and-wild-adventure-activities"],
['Brunswick Cinebowl', '', 'family', 55.013008, -7.324448, "/local-activities/specific/brunswick-cinebowl"],
['Campsie Karting', '', 'family', 55.036076, -7.196903, "/local-activities/specific/campsie-karting"],
['Barron Top Fun Farm', '', 'family', 54.856497, -7.335434, "/local-activities/specific/barron-top-fun-farm-1"],
['Ulster American Folk Park', '', 'family', 54.587973, -7.377191, "/local-activities/specific/ulster-american-folk-park-1"],
['Giants Causeway', '', 'family', 55.233317, -6.518154, "/local-activities/specific/giants-causeway"],
['Carick-a-Rede Rope Bridge', '', 'family', 55.237282, -6.351643, "/local-activities/specific/carick-a-rede-rope-bridge"],
['Mussenden Temple', '', 'family', 55.165410, -6.818218, "/local-activities/specific/mussenden-temple"]
];
//Set up Google Map
var map = new google.maps.Map(document.getElementById('map-canvas'), {
zoom: 15,
center: new google.maps.LatLng(55.013431, -7.314148),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
//InfoBox will be used so InfoWindow is not needed
//var infowindow = new google.maps.InfoWindow();
//Set shadow options
var shadow = new google.maps.MarkerImage('images/marker-shadow.png',
new google.maps.Size(77.0, 62.0),
new google.maps.Point(0, 0),
new google.maps.Point(22.0, 62.0)
);
var marker, i;
for ( var i = 0; i < locations.length; i++ ) {
console.log(locations[i][3], locations[i][4]);
}
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][3], locations[i][4]),
map: map,
shadow: shadow,
icon: 'images/map_'+locations[i][2]+'_image.png'
});
markers.push(marker);
//Create div for InfoBox content
var boxText = document.createElement("div");
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function () {
//Style InfoBox content
boxText.style.cssText = "border: none 0; margin-top: 8px; background:#fff; padding: 8px;border:1px solid #877856;";
boxText.innerHTML = locations[i][0]+"<br />"+locations[i][2]+"<br />"+locations[i][1]+"<img src='images/tipbox.png' class='infobox-arrow' />";
//Remove close box bug fix
$(".infobox-close").remove();
//Set InfoBox options
var myOptions = {
content: boxText
,disableAutoPan: false
,maxWidth: 0
,pixelOffset: new google.maps.Size(-140, -180)
,zIndex: null
,boxStyle: {
opacity: 1
,width: "280px"
}
,closeBoxMargin: "12px 7px 0 0"
,closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif"
,infoBoxClearance: new google.maps.Size(1, 1)
,isHidden: false
,pane: "floatPane"
,enableEventPropagation: false
};
//Move map to center on marker
map.setCenter(marker.getPosition());
//Attach info box to relevant marker
var ib = new InfoBox(myOptions);
ib.open(map, marker);
//Close InfoBox when map tiles are clicked
$("canvas").click(function () {
ib.close(map, marker);
});
}
})(marker, i));
};
//shows all markers of a particular category, and ensures the checkbox is checked
function show(category) {
for (var i=0; i<locations.length; i++) {
if (locations[i][2] == category) {
markers[i].setVisible(true);
}
}
}
//hides all markers of a particular category, and ensures the checkbox is cleared
function hide(category) {
for (var i=0; i<locations.length; i++) {
if (locations[i][2] == category) {
markers[i].setVisible(false);
}
}
}
//show or hide the categories initially
show("walking");
hide("golfing");
hide("family");
hide("explore");
hide("cycling");
//Show/Hide category markers
$("#activities .checkbox").click(function(){
var cat = $(this).attr("value");
// If checked
if ($(this).is(":checked"))
{
show(cat);
}
else
{
hide(cat);
}
});
};
//Execute function onload
window.load = initialize();
解决方案
well, you could program that inside your show function, I created own fiddle for you which demonstrates how to set 2 markers visible from array of 3 markers and fitBounds for only those:
Since code is now visible, with your case you could make separate fitBoundsToVisibleMarkers() method to be runned always after show() and hide() methods. for example:
function fitBoundsToVisibleMarkers() {
var bounds = new google.maps.LatLngBounds();
for (var i=0; i<markers.length; i++) {
if(markers[i].getVisible()) {
bounds.extend( markers[i].getPosition() );
}
}
map.fitBounds(bounds);
}
and your code does this:
function show(category) {
for (var i=0; i<locations.length; i++) {
if (locations[i][2] == category) {
markers[i].setVisible(true);
}
}
// updating bounds in view
fitBoundsToVisibleMarkers();
}
function hide(category) {
for (var i=0; i<locations.length; i++) {
if (locations[i][2] == category) {
markers[i].setVisible(false);
}
}
// updating bounds in view
fitBoundsToVisibleMarkers();
}
这篇关于Google地图V3可见标记上的fitBounds的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
