javascript - 谷歌地图缩放功能不起作用

Question

我正在尝试使用 html 和 jQuery 来使用 Google map ，但缩放功能无法正常工作，我正在尝试使用带有 owntracks 数据的 Google map ，请检查下面的代码。

			<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDXNCKw3k07Z0QLw2GOuPjajvS0psHVCX0&libraries=places,drawing,geometry"></script>
<script type="text/javascript">
				////////////////////////////////////////////////////////////////////////
				// Google Maps JavaScript API:
				// https://developers.google.com/maps/documentation/javascript/?hl=de
				// Marker Icons:
				// https://sites.google.com/site/gmapsdevelopment/
				////////////////////////////////////////////////////////////////////////

				////////////////////////////////////////////////////////////////////////
				// JQuery
				////////////////////////////////////////////////////////////////////////

			var map = null;
				//make an empty bounds variable
				var bounds = new google.maps.LatLngBounds();

				// LatLng's we want to show
			$( document ).ready($(function() {
				var mapOptions = {  
									zoom      : 13,
						}
			   
					map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
					// ******************************************************************************
					$.ajax({
					  url     : "../rest/items/locationIrvan/state/",
					  data    : {},
					  success : function( data ) {
						  if ( map == null) { return; }
						  if ( data == "Uninitialized") { return; }
						  
						  var coords = data.split(',');
						  var latlngPatrik = new google.maps.LatLng(coords[0],coords[1]);
						  
						  var marker = new google.maps.Marker({
							position  : latlngPatrik,
							map       : map,
							icon      : 'http://maps.google.com/mapfiles/ms/icons/pink-dot.png',
							title     : "Irvan"
						  }) // end of [Marker]
							   bounds.extend(latlngPatrik);
						} // end of [function]
					}) // end of [$.ajax]
		}))

				$( document ).ready($(function() {
			 // ******************************************************************************
			// ******************************************************************************
					$.ajax({
					  url     : "../rest/items/locationIrvan/state/",
					  data    : {},
					  success : function( data ) {
						  if ( map == null) { return; }
						  if ( data == "Uninitialized") { return; }

						  var coords = data.split(',');
						  var latlngKarin = new google.maps.LatLng(coords[0],coords[1]);

						  var marker = new google.maps.Marker({
							position  : latlngKarin,
							map       : map,
							icon      : 'http://maps.google.com/mapfiles/ms/icons/green-dot.png',
							title     : "Irvan"
						  }) // end of [Marker]

						  $.ajax({
							url     : "../rest/items/mqttIrvanAccuracy/state/",
							data    : {},
							success : function( data ) {
							if ( data == "Uninitialized") { return; }
							  var accuracy = parseInt(data);
							  var circle = new google.maps.Circle({
								center        : latlngKarin,
								radius        : accuracy,
								map           : map,
								strokeColor   : '#00FF00',
								strokeOpacity : 0.8,
								strokeWeight  : 2,
								fillColor     : '#00FF00',
								fillOpacity   : 0.35,
							  }); // end of [Circle]

							  bounds.extend(latlngKarin);
							  map.fitBounds(bounds);
							} // end of [function]
						  }) // end of [$.ajax]
						} // end of [function]
					}) // end of [$.ajax]
				   // map.fitBounds(bounds);
			}))
			</script>

.Flexible-container {
			  position: relative;
			  padding-bottom: 0px;
			  padding-top   : 0px;
			  height        : 340px ;
			  overflow: hidden;
			}

			.Flexible-container iframe,
			.Flexible-container object,
			.Flexible-container embed {
			  position: absolute;
			  top: 0;
			  left: 0;
			  width: 100%;
			  height: 100%;
			}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="map_canvas" class="Flexible-container" />

无论我改变缩放值，结果都是一样的，我希望有人能给我一个线索，我已经工作了几周但没有任何结果，谢谢。

Answer 1

您正在使用拟合边界。这是为了调整缩放级别以包含所有标记。因此，无论您对缩放级别进行什么更改，它看起来都是一样的。