创建Javascript/JQuery后检索Google Map对象
Retrieve Google Map object after creation Javascript/JQuery
我想知道是否有办法在创建后检索google.maps.map对象? 我需要在我的页面中创建多个地图,并且我正在使用一个函数来遍历 JSON 来创建地图。 因此,我没有留下一个全局"地图"对象,我需要能够不时地重新定位地图。 问题是,我不知道如何让"map"对象重置地图的中心。 我可以通过 JQuery 选择器获取div,在那里我使用 Gmaps.js 创建了地图,我甚至可以触发"调整大小"事件作为隐藏div 的修复。 但是,我检索地图对象本身没有任何运气。
------------------地图创建功能--------------------------------------
function doMaps(){$.getJSON("map-locations.json", function(results) {
//var JSONdata = JSON.parse(results);
//alert(results);
$.each(results, function(index, val) {
var mapdiv = results[index].mapdiv;
var destlat = results[index].destination.lat;
var destlon = results[index].destination.lon;
var desttitle = results[index].destination.title;
var orglat = results[index].origin.lat;
var orglon = results[index].origin.lon;
var map;
map = new GMaps({
el: '#'+mapdiv,
lat: destlat,
lng: destlon,
width: '750px',
height: '580px'
});
map.travelRoute({
origin: [orglat, orglon],
destination: [destlat, destlon],
travelMode: 'driving',
step: function(e){
$('#instructions').append('<li>'+e.instructions+'</li>');
$('#instructions li:eq('+e.step_number+')').delay(450*e.step_number).fadeIn(200, function(){
map.drawPolyline({
path: e.path,
strokeColor: '#131540',
strokeOpacity: 0.6,
strokeWeight: 6
});
});
}
});
map.addMarker({
lat: destlat,
lng: destlon,
title: desttitle,
infoWindow: {
content: '<p>'+desttitle+'</p>'
}
});
});
});
};
------------- 调整大小功能 - 在 ZoZo 选项卡---------------------的选项卡更改事件上触发
function resizeMaps(){
$('.map').each(function() {
var map = $(this).get(0);
google.maps.event.trigger(map, 'resize');
// WHERE I WOULD LIKE TO RECENTER AFTER RESIZE
//$(this).get(0).setCenter(currCenter);
})
}
任何帮助将不胜感激。
创建对象数组是最好的方法。 实际上,我最终得到了一个多维数组。
var maps = new Array();
function doMaps(){$.getJSON("map-locations.json", function(results) {
//var JSONdata = JSON.parse(results);
//alert(results);
$.each(results, function(index, val) {
var mapdiv = results[index].mapdiv;
var destlat = results[index].destination.lat;
var destlon = results[index].destination.lon;
var desttitle = results[index].destination.title;
var orglat = results[index].origin.lat;
var orglon = results[index].origin.lon;
var cntlat = results[index].center.lat;
var cntlon = results[index].center.lon;
var zoom = results[index].zoom;
var route;
var map;
map = new GMaps({
el: '#'+mapdiv,
lat: cntlat,
lng: cntlon,
width: '750px',
height: '580px',
zoom: zoom
});
map.addMarker({
lat: destlat,
lng: destlon,
title: desttitle,
infoWindow: {
content: '<p>'+desttitle+'</p>'
}
});
map.addMarker({
lat: orglat,
lng: orglon,
title: 'You Are Here',
infoWindow: {
content: '<p>You Are Here</p>'
}
});
setTimeout(function() {
map.getRoutes({
origin: [orglat, orglon],
destination: [destlat, destlon],
travelMode: 'driving'
});
}, 1000);
var mapData = new Array();
mapData[0] = mapdiv;
mapData[1] = map;
maps.push(mapData);
});
});
};
//retrieve mapData
var mapData = $.grep(maps, function(mapData) {
return mapData[0] === mapdiv;
});
map = mapData[0][1];
相关文章:
- 回调函数中传递参数的困难(Google Map API Markers)
- 使用API在我的网站Google-Map上显示搜索地址的纬度和经度
- 通过内部数组将JSON数据导入D3.js+Google Map
- 没有显示带有Infobox PHP/SQL的Google Map API v3
- 在javascript函数中访问Google map api
- Google Map API BackBoneJS 无法读取 null 的属性 'offsetWidth'
- Google Map KML层占位符点击事件返回ZERO_RESULTS
- Google Map JS API-加载地图分幅,但所有图像(标记、缩放控制等)都不加载;t负载2分钟
- Google MAP API 未捕获类型错误:无法读取 null 的属性“offsetWidth”
- jQuery在使用Bootstrap 3的Google Map v3的信息窗口中工作不完美
- 将Jquery拖放到Google Map V3
- Angular Google Map的自定义样式
- 样式化地图和地点库Google Map API v3
- 在Google Map API中定位画布外的输入字段
- Google Map API v3 在 Wordpress 中不起作用
- Google Map API use LatLng or Address
- SetTimeout on Directionservice route in google map javascrip
- Google Map API - foreach 循环中的信息窗口
- 将 MarkerClusterer 与数据库驱动的 Google Map V3 集成
- javascript google map setcenter and setzoom with animation