Google地图切换 [英] Google maps in toggle
本文介绍了Google地图切换的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我在摆放goole地图时遇到问题。
我使用简单的切换打开地图，但我只看到地图的一部分。
这是结果的印记：
http://lab-360.it/img/maps.jpg
以下是代码：
/ * toggle * /
$（document）.ready（function（）{
$（'。acf-map'）。hide（）;
$（'a.togglelink-map'）。on 'click'，function（e）{
e.preventDefault（）;
var elem = $（this）.next（'。acf-map'）
$（'。acf- （'fast'）;
elem.toggle（'fast'）;
}）;
}）;
$ b / * acf渲染图* /
（函数（$）{
/ *
* render_map
*
*这个函数会将Google Map渲染到选定的jQuery元素
*
* @type函数
* @date 8/11/2013
* @since 4.3.0
*
* @param $ el（jQuery元素）
* @return不适用
* /
var map ;
函数render_map（$ el）{
// var
var $ markers = $ el.find（'。marker'）;
// vars
var args = {
zoom：16，
center：new google.maps.LatLng（0，0），
mapTypeId：google.maps .MapTypeId.ROADMAP
};
//创建地图
map =新的google.maps.Map（$ el [0]，args）;
//添加标记引用
map.markers = [];
//添加标记
$ markers.each（function（）{
add_marker（$（this），map）;
}）;
//中心图
cen ter_map（地图）;
}
/ *
* add_marker
*
*此功能会为选定的Google地图
* $ b $添加一个标记b * @type函数
* @date 8/11/2013
* @since 4.3.0
*
* @param $ marker（jQuery元素）
* @param map（Google Map对象）
* @return不适用
* /
函数add_marker（$ marker，map）{
/ / var
var latlng = new google.maps.LatLng（$ marker.attr（'data-lat'），$ marker.attr（'data-lng'））;
//创建标记
var marker = new google.maps.Marker（{
position：latlng，
map：map
}）;
//添加到数组
map.markers.push（marker）;
// if marker contains HTML，add it to infoWindow
if（$ marker.html（））{
//创建信息窗口
var infowindow = new google.maps.InfoWindow（{
content：$ marker.html（）
}）;
//点击标记时显示信息窗口
google.maps.event.addListener（marker，'click'，function（）{
infowindow.open （map，marker）;
}）;
}
}
/ *
* center_map
*
*此功能将使地图居中，显示所有标记附加到此地图
*
* @type函数
* @date 8/11/2013
* @since 4.3.0
*
* @ param map（Google Map object）
* @return n / a
* /
function center_map（map）{
$ b // vars
var bounds = new google.maps.LatLngBounds（）;
//遍历所有标记并创建边界
$ .each（map.markers，function（i，marker）{
var latlng = new google。 maps.LatLng（marker.position.lat（），marker.position.lng（））;
bounds.extend（latlng）;
}）;
//只有1个标记？
if（map.markers.length == 1）{
//设置地图中心
map.setCenter（bounds.getCenter（））;
map.setZoom（16）;
} else {
//适合界限
map.fitBounds（bounds）; （'click'，'.map'，function（）{
google.maps.event.trigger（map，'resize' ）;
map.setCenter（bounds.getCenter（））;
map.setZoom（16）;
}）;
$ b $ * b $ b *文档准备就绪
*
*此功能将在文档准备好时呈现每张地图（页面有加载）
*
* @type函数
* @date 8/11/2013
* @since 5.0.0
*
* @param n / a
* @return n / a
* /
$（document）.ready（function（）{
$（'。acf （）函数（）{
render_map（$（this））;
}）;
}）;
}）（jQuery）;
这是content.php中的代码
<？php $ location = get_field（'luogo'）; if（$ location ['address']）{？>
< a href =＃class =togglelink-map> accedi< / a>
< div class =acf-map>
< div class =markerdata-lat =<？php echo $ location ['lat'];？> data-lng =<？php echo $ location ['lng'];？> itemprop = 地图 >< / DIV>
< / div>
<？php}？>
解决方案
基本问题是map-div ）在创建地图时没有大小。
最简单的方法是在切换地图时触发窗口的调整大小事件（以看看最后一行）：
$（document）.ready（function（）{
$（'。 （'click'，function（e）{
e.preventDefault（）;
（'a.togglelink-map'）。 （elem）.hide（'fast'）;
$ b $（'。acf-map'）。 b elem.toggle（'fast'，function（）{google.maps.event.trigger（window，'resize'）}）;
}）;
}）;
问题：地图不会在所需位置居中，并且没有处理
另一种方法：
触发map-div的自定义事件：
$（document）.ready（function（）{
$（'。acf-map'）。 hide（）;
$（'a.togglelink-map'）。on（'click'，function（e）{
e.preventDefault（）;
var elem = $（this ）.next（'.acf-map'）
$（'。acf-map'）。not（elem）.hide（'fast'）;
elem.toggle（'快速'，function（）{google.maps.event.trigger（this，'toggle'）;}）;
}）;
}）;
在render_map中为此自定义事件定义一个处理程序：
map =（function（o，a）{
var m = new google.maps.Map（o，a）;
google.maps。 event.addListener（o，'toggle'，function（）{
var c = m.getCenter（）;
google.maps.event.trigger（m，'resize'）;
if（！m.get（'centered'））{
m.setCenter（c）;
m.set（'centered'，1）;
}
}） ;
返回m;
}）（$ el [0]，args）;
演示： http://jsfiddle.net/doktormolle/3rQuk/
I have problems with lay out of the goole maps. I am using simple toggle to open the map, but i see only a part of the map.
Then i use acf (advanced custom field) for wordpress to show the map. But i have seen that toggle is in conflict with google api.
This is a stamp of the result:
http://lab-360.it/img/maps.jpg
Here is the code:
/*toggle*/
$(document).ready(function () {
$('.acf-map').hide();
$('a.togglelink-map').on('click', function (e) {
e.preventDefault();
var elem = $(this).next('.acf-map')
$('.acf-map').not(elem).hide('fast');
elem.toggle('fast');
});
});
/*acf render map*/
(function ($) {
/*
* render_map
*
* This function will render a Google Map onto the selected jQuery element
*
* @type function
* @date 8/11/2013
* @since 4.3.0
*
* @param $el (jQuery element)
* @return n/a
*/
var map;
function render_map($el) {
// var
var $markers = $el.find('.marker');
// vars
var args = {
zoom: 16,
center: new google.maps.LatLng(0, 0),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
// create map
map = new google.maps.Map($el[0], args);
// add a markers reference
map.markers = [];
// add markers
$markers.each(function () {
add_marker($(this), map);
});
// center map
center_map(map);
}
/*
* add_marker
*
* This function will add a marker to the selected Google Map
*
* @type function
* @date 8/11/2013
* @since 4.3.0
*
* @param $marker (jQuery element)
* @param map (Google Map object)
* @return n/a
*/
function add_marker($marker, map) {
// var
var latlng = new google.maps.LatLng($marker.attr('data-lat'), $marker.attr('data-lng'));
// create marker
var marker = new google.maps.Marker({
position: latlng,
map: map
});
// add to array
map.markers.push(marker);
// if marker contains HTML, add it to an infoWindow
if ($marker.html()) {
// create info window
var infowindow = new google.maps.InfoWindow({
content: $marker.html()
});
// show info window when marker is clicked
google.maps.event.addListener(marker, 'click', function () {
infowindow.open(map, marker);
});
}
}
/*
* center_map
*
* This function will center the map, showing all markers attached to this map
*
* @type function
* @date 8/11/2013
* @since 4.3.0
*
* @param map (Google Map object)
* @return n/a
*/
function center_map(map) {
// vars
var bounds = new google.maps.LatLngBounds();
// loop through all markers and create bounds
$.each(map.markers, function (i, marker) {
var latlng = new google.maps.LatLng(marker.position.lat(), marker.position.lng());
bounds.extend(latlng);
});
// only 1 marker?
if (map.markers.length == 1) {
// set center of map
map.setCenter(bounds.getCenter());
map.setZoom(16);
} else {
// fit to bounds
map.fitBounds(bounds);
}
$(document).on('click', '.map', function () {
google.maps.event.trigger(map, 'resize');
map.setCenter(bounds.getCenter());
map.setZoom(16);
});
}
/*
* document ready
*
* This function will render each map when the document is ready (page has loaded)
*
* @type function
* @date 8/11/2013
* @since 5.0.0
*
* @param n/a
* @return n/a
*/
$(document).ready(function () {
$('.acf-map').each(function () {
render_map($(this));
});
});
})(jQuery);
This is the code in content.php
<?php $location = get_field('luogo'); if($location['address']) { ?>
<a href="#" class="togglelink-map">accedi</a>
<div class="acf-map">
<div class="marker" data-lat="<?php echo $location['lat']; ?>" data-lng="<?php echo $location['lng']; ?>" itemprop="map"></div>
</div>
<?php } ?>
解决方案
The basic issue is that the map-div(s) don't have a size when you create the map.
The easiest approach would be to trigger the resize-event of the window when you toggle a map(take a look at the last line):
$(document).ready(function () {
$('.acf-map').hide();
$('a.togglelink-map').on('click', function (e) {
e.preventDefault();
var elem = $(this).next('.acf-map')
$('.acf-map').not(elem).hide('fast');
elem.toggle('fast',function(){google.maps.event.trigger(window,'resize')});
});
});
The problem: the map will not be centered at the desired position, and there is no handle to the maps-instance to apply a centering.
Another approach:
Trigger a custom event for the map-div:
$(document).ready(function () {
$('.acf-map').hide();
$('a.togglelink-map').on('click', function (e) {
e.preventDefault();
var elem = $(this).next('.acf-map')
$('.acf-map').not(elem).hide('fast');
elem.toggle('fast',function(){google.maps.event.trigger(this,'toggle');});
});
});
In render_map define a handler for this custom event:
map = (function (o, a) {
var m = new google.maps.Map(o, a);
google.maps.event.addListener(o, 'toggle', function () {
var c = m.getCenter();
google.maps.event.trigger(m, 'resize');
if(!m.get('centered')){
m.setCenter(c);
m.set('centered',1);
}
});
return m;
})($el[0], args);
Demo: http://jsfiddle.net/doktormolle/3rQuk/
这篇关于Google地图切换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
![http://lab-360.it/img/maps.jpg](\"http://lab-360.it/img/maps.jpg\"){kind=link}
