我正在尝试使用html和jQuery的Google地图,但是缩放功能不起作用,我正在尝试使用此带有owntracks数据的Google地图检查下面的代码。
<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" />
无论我更改缩放值,结果都是一样的,我希望有人能给我一个线索,我正在工作一周,但什么都没有,谢谢。
您正在使用拟合边界。这是为了调整缩放级别以包含所有标记。因此,无论您对缩放级别进行什么更改,它看起来都是一样的。
使用这个
var mapOptions = {
zoom : 13,
zoomControl: true
}