Google地图重置为初始状态 [英] Google map reset to initial state
本文介绍了Google地图重置为初始状态的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我试图找出如何添加重置为初始状态按钮。
我有一个带有用于几个商店位置的标记的Google地图。
这是我使用的代码：
<脚本类型= 文本/ JavaScript的 >
（函数（$）{
/ ** new_map * /
函数new_map（$ el）{
// var
var $ markers = $ el.find（'。marker'）;
//变量
//变量
var args = {
zoom：15，
center：new google.maps.LatLng（0，0），
mapTypeControl：false，
panControl：false，
scrollwheel：false，
streetViewControl：false，
zoomControlOptions：{
style：google.maps.ZoomControlStyle.SMALL，
position：google.maps.ControlPosition.RIGHT_CENTER
}，
样式：[{stylers：[{saturation： - 100}，{gamma：1}]}，{elementType：labels.text.stroke，stylers：[{visibility ： 关 }]}，{ 类型特征 ： poi.business 的ElementType： labels.text， 造型器：[{ 可视性： 关}]}，{ 类型特征： poi.business， 的ElementType： labels.icon， 造型器：[{ 可视性： 关}]}，{ 类型特征： poi.place_of_worship， 的ElementType： labels.text， 造型器：[{ 可视性： 关}]}，{ 类型特征： poi.place_of_worship， 的ElementType： labels.icon，STYL ERS ：[{ 可视性 ： 关 }]}，{ 类型特征 ： 道路， 的ElementType： 几何， 造型器：[{ 可视性： 简化}]}， { 类型特征： 水， 造型器：[{ 可视性： 上}，{ 饱和：50}，{ 伽马：0}，{ 色相： ＃50a5d1} ]}，{ 类型特征： administrative.neighborhood， 的ElementType： labels.text.fill， 造型器：[{ 颜色： ＃333333}]}，{ 类型特征： road.local 的ElementType： labels.text， 造型器：[{ 重量：0.5}，{ 颜色： ＃333333}]}，{ 类型特征： transit.station ， 的ElementType： labels.icon， 造型器：[{ 伽马：1}，{ 饱和：50}]}]};
//创建地图
var map = new google.maps.Map（$ el [0]，args）;
//添加标记引用
map.markers = [];
$ b $ //添加记号
$ markers.each（函数（）{
add_marker（$（this），map）;
}）;
//中心图
center_map（map）;
//返回
返回地图;
}
//在每个窗口外创建信息窗口 - 然后告诉单数infowindow根据点击
var infowindow = new google .maps.InfoWindow（{
content：''
}）;
$ b / ** add_marker * /
函数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）;
//如果marker包含HTML，将它添加到infoWindow
if（$ marker.html（））
{
//创建信息窗口
liTag = $（。aflista ul）。find（[data-lat ='+ $ marker.attr（'data -lat'）+']）;
// console.log（liTag）;
//点击标记时显示信息窗口
$（liTag）.click（function（）{
infowindow.setContent（$ marker.html（））;
infowindow。打开（地图，标记）;
map.setZoom（12）;
map.setCenter（marker.getPosition（））
}）;
google.maps.event.addListener（marker，'click'，function（）{
infowindow.setContent（$ marker.html（））;
infowindow.open（ map，marker）;
map.setZoom（12）;
map.setCenter（marker.getPosition（））
}）;
//点击地图时的关闭信息窗口
google.maps.event.addListener（地图，'点击'，函数（事件）{
if（infowindow）{
infowindow.close（）;}
}）;
}
}
/ ** center_map * /
function center_map（map）{
// 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）;
}
}
/ **文件准备好* /
//全局变量
var map = null;
$ b $（document）.ready（function（）{
$（'。acf-map'）。each（function（）{
//创建地图
map = new_map（$（this））;
}）;
}）;
}）（jQuery）;
现在我想添加一个按钮在地图外部或地图内的任何位置都可以选择重置缩放和中心到初始状态。
正确方向上的任何点都非常棒。
p>谢谢！
解决方案
要将地图重置为初始状态，当你初始化你的地图时你也会做同样的事情。您不需要重做所有事情，您可以将计算出的初始边界保存在全局变量中（以及 map ），然后在点击重置按钮时调用 map.fitBounds（bounds）; 。
$（＃reset_state）。click（function（）{
infowindow.close（）;
map.fitBounds（bounds）;
}）
代码段：
（function（$）{/ ** new_map * / function new_map（$ el）{var $ markers = $ el.find（' .marker'）; var args = {zoom：15，center：new google.maps.LatLng（0，0），mapTypeControl：false，panControl：false，scrollwheel：fals e，streetViewControl：false，zoomControlOptions：{style：google.maps.ZoomControlStyle.SMALL，position：google.maps.ControlPosition.RIGHT_CENTER}}; //创建地图map = new google.maps.Map（$ el [0]，args）; //添加标记引用map.markers = []; //添加标记$ markers.each（function（）{add_marker（$（this），map）;}）; //中心地图center_map（地图）; //返回返回地图; } //在每个窗口之外创建信息窗口 - 然后告诉那个单独的infowindow根据点击交换内容var infowindow = new google.maps.InfoWindow（{content：''}）; / ** add_marker * / function 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）; //如果标记包含HTML，则将其添加到infoWindow if（$ marker.html（））{//创建信息窗口liTag = $（。aflista ul）。find（[data-lat ='+ $ marker.attr（'data-lat'）+']）; // console.log（liTag）; //点击标记时显示信息窗口$（liTag）.click（function（）{infowindow.setContent（$ marker.html（））; infowindow.open（map，marker）; map.setZoom（12）; map。 setCenter（marker.getPosition（））}）; google.maps.event.addListener（marker，'click'，function（）{infowindow.setContent（$ marker.html（））; infowindow.open（map，marker）; map.setZoom（12）; map.setCenter（ marker.getPosition（））}）; //点击地图时关闭信息窗口google.maps.event.addListener（map，'click'，function（event）{if（infowindow）{infowindow.close（）;}}）; }} / ** center_map * / function center_map（map）{// vars 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）;}）; //只有一个标记？ if（map.markers.length == 1）{//设置地图的中心map.setCenter（bounds.getCenter（））; map.setZoom（16）; } else {//适合界限map.fitBounds（bounds）; }} / **准备好文件* / //全局变量var var map = null; var bounds = null; $（document）.ready（function（）{$（'。acf-map'）。each（function（）{//创建地图map = new_map（$（this））;}）; $（＃reset_state ）.click（function（）{infowindow.close（）; map.fitBounds（bounds）;}）}）;}）（jQuery）;
html，body，＃map_canvas {height：100％;宽度：100％; margin：0px; < script src =https：//
I'm trying to find out how to add a "reset to initial state"-button.
I have a Google Map with markers for a few shop locations.
This is the code I use:
<script type="text/javascript">
(function($) {
/** new_map */
function new_map( $el ) {
// var
var $markers = $el.find('.marker');
// vars
// vars
var args = {
zoom: 15,
center: new google.maps.LatLng(0, 0),
mapTypeControl: false,
panControl: false,
scrollwheel: false,
streetViewControl:false,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL,
position: google.maps.ControlPosition.RIGHT_CENTER
},
styles: [{"stylers":[{"saturation":-100},{"gamma":1}]},{"elementType":"labels.text.stroke","stylers":[{"visibility":"off"}]},{"featureType":"poi.business","elementType":"labels.text","stylers":[{"visibility":"off"}]},{"featureType":"poi.business","elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"poi.place_of_worship","elementType":"labels.text","stylers":[{"visibility":"off"}]},{"featureType":"poi.place_of_worship","elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"road","elementType":"geometry","stylers":[{"visibility":"simplified"}]},{"featureType":"water","stylers":[{"visibility":"on"},{"saturation":50},{"gamma":0},{"hue":"#50a5d1"}]},{"featureType":"administrative.neighborhood","elementType":"labels.text.fill","stylers":[{"color":"#333333"}]},{"featureType":"road.local","elementType":"labels.text","stylers":[{"weight":0.5},{"color":"#333333"}]},{"featureType":"transit.station","elementType":"labels.icon","stylers":[{"gamma":1},{"saturation":50}]}]};
// create map
var 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 );
// return
return map;
}
// create info window outside of each - then tell that singular infowindow to swap content based on click
var infowindow = new google.maps.InfoWindow({
content : ''
});
/** add_marker */
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
liTag=$(".aflista ul").find("[data-lat='" + $marker.attr('data-lat') + "']");
// console.log(liTag);
// show info window when marker is clicked
$(liTag).click(function() {
infowindow.setContent($marker.html());
infowindow.open(map, marker);
map.setZoom(12);
map.setCenter(marker.getPosition())
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent($marker.html());
infowindow.open(map, marker);
map.setZoom(12);
map.setCenter(marker.getPosition())
});
// close info window when map is clicked
google.maps.event.addListener(map, 'click', function(event) {
if (infowindow) {
infowindow.close(); }
});
}
}
/** center_map */
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 ready */
// global var
var map = null;
$(document).ready(function(){
$('.acf-map').each(function(){
// create map
map = new_map( $(this) );
});
});
})(jQuery);
Now I want to add a button anywhere outside or inside the map only to have the option to reset the zoom and center to the initial state.
Any points in the right direction would be awesome.
Thanks!
解决方案
To reset the map to its initial state, do the same thing you do when you initialize your map. You don't need to redo everything, you can save the computed initial bounds in a global variable (as well as the map), then call map.fitBounds(bounds); when your reset button is clicked.
$("#reset_state").click(function() {
infowindow.close();
map.fitBounds(bounds);
})
code snippet:
(function($) {
/** new_map */
function new_map($el) {
var $markers = $el.find('.marker');
var args = {
zoom: 15,
center: new google.maps.LatLng(0, 0),
mapTypeControl: false,
panControl: false,
scrollwheel: false,
streetViewControl: false,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL,
position: google.maps.ControlPosition.RIGHT_CENTER
}
};
// 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);
// return
return map;
}
// create info window outside of each - then tell that singular infowindow to swap content based on click
var infowindow = new google.maps.InfoWindow({
content: ''
});
/** add_marker */
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
liTag = $(".aflista ul").find("[data-lat='" + $marker.attr('data-lat') + "']");
// console.log(liTag);
// show info window when marker is clicked
$(liTag).click(function() {
infowindow.setContent($marker.html());
infowindow.open(map, marker);
map.setZoom(12);
map.setCenter(marker.getPosition())
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent($marker.html());
infowindow.open(map, marker);
map.setZoom(12);
map.setCenter(marker.getPosition())
});
// close info window when map is clicked
google.maps.event.addListener(map, 'click', function(event) {
if (infowindow) {
infowindow.close();
}
});
}
}
/** center_map */
function center_map(map) {
// vars
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 ready */
// global var
var map = null;
var bounds = null;
$(document).ready(function() {
$('.acf-map').each(function() {
// create map
map = new_map($(this));
});
$("#reset_state").click(function() {
infowindow.close();
map.fitBounds(bounds);
})
});
})(jQuery);
html,
body,
#map_canvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<input type="button" id="reset_state" value="reset" />
<div class="aflista">
<ul>Markers
<li data-lat='40.7127837'>New York, NY</li>
<li data-lat='40.735657'>Newark, NJ</li>
</ul>
</div>
<div class="acf-map" id="map_canvas">
<div class="marker" data-lat="40.7127837" data-lng="-74.00594130000002" data-title="New York, NY">New York, NY</div>
<div class="marker" data-lat="40.735657" data-lng="-74.1723667" data-title="Newark, NJ">Newark, NJ</div>
</div>
这篇关于Google地图重置为初始状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
