admin管理员组文章数量:1426111
I have the following code to how a map. Everything works fine except the zoom parameter. No matter what I set for zoom, it always shows the same zoom level. What can I do?
$('#pagemap').live("pageshow", function() {
$('#map_canvas').gmap().bind('init', function(evt, map) {
$('#map_canvas').gmap('getCurrentPosition', function(position, status) {
if ( status === 'OK' ) {
var clientPosition = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
$('#map_canvas').gmap('option', 'mapTypeId', google.maps.MapTypeId.SATELLITE);
$('#map_canvas').gmap('option', 'zoom', 13);
$('#map_canvas').gmap('addMarker', {'position': clientPosition, 'bounds': true});
}
});
});
});
I have the following code to how a map. Everything works fine except the zoom parameter. No matter what I set for zoom, it always shows the same zoom level. What can I do?
$('#pagemap').live("pageshow", function() {
$('#map_canvas').gmap().bind('init', function(evt, map) {
$('#map_canvas').gmap('getCurrentPosition', function(position, status) {
if ( status === 'OK' ) {
var clientPosition = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
$('#map_canvas').gmap('option', 'mapTypeId', google.maps.MapTypeId.SATELLITE);
$('#map_canvas').gmap('option', 'zoom', 13);
$('#map_canvas').gmap('addMarker', {'position': clientPosition, 'bounds': true});
}
});
});
});
3 Answers
Reset to default 5you need to change the 'bounds' option of the marker to false.
$('#map_canvas').gmap('addMarker', {'position': clientPosition, 'bounds': false});
If you set the property bounds to true the map will calculate the viewport and zoom automagically, overriding any zoom set in the contructor Blockquote
this is a link for more informations
I was facing a problem with that solution. If I set bounds to false, the map remains centered in its initial center coordinates. Ok that. So why my map was centered at a point with a pin far away? Ok, no problem. But if I still want to set a specific zoom level after adding a marker?
$("your-selector").gmap('addMarker', {
'position': latlng,
'bounds': true
}, function(map, marker) {
map.set('zoom', 12);
}).click(function() {
$(this.container).gmap('openInfoWindow', { 'content': 'TEXT_AND_HTML_IN_INFOWINDOW' }, this);
});
You just callback gmap function. But people, isn't it time to correct all broken links on API documentation for this plugin? Isn't it time to write well specified and clear Javascript documentation for any plugin? Let's help each other, this way is quite plicated. We are losing much time.
Try this,look at this " zoom: 9" in code for zoom level ...
<div id="MyDivScrolling">
<div>
<script type="text/javascript" src="http://maps.googleapis./maps/api/js?key=AIzaSyC8KY7rkZP7Xyq5oVM0nssUc4OPIP7MQtw&callback=initMap"></script>
<script type="text/javascript">
var markers = [{
"title": 'Havana',
"lat": '23.1330200',
"lng": '-82.3830400',
"description": 'José Martí International Airport, Havana'
}
,
{
"title": 'Tampa',
"lat": '27.964157',
"lng": '-82.452606',
"description": 'Tampa International Airport, Tampa'
}
,
{
"title": 'Orlando',
"lat": '28.538336',
"lng": ' -81.379234',
"description": 'Orlando International Airport, Orlando'
}
,
{
"title": 'Havana',
"lat": '23.1330200',
"lng": '-82.3830400',
"description": 'José Martí International Airport, Havana'
}
,
{
"title": 'Havana',
"lat": '23.1330200',
"lng": '-82.3830400',
"description": 'José Martí International Airport, Havana'
}
,
{
"title": 'Miami',
"lat": '25.7742700',
"lng": '-80.1936600',
"description": 'Miami International Airport, Miami'
}
,
{
"title": 'Camagüey-Ignacio Agramonte',
"lat": '21.416666666667',
"lng": '-77.866666666667 ',
"description": 'Camagüey-Ignacio Agramonte Airport, Camagüey'
}
,
{
"title": 'Camagüey-Ignacio Agramonte',
"lat": '21.416666666667',
"lng": '-77.866666666667 ',
"description": 'Camagüey-Ignacio Agramonte Airport, Camagüey'
}
,
{
"title": 'Tampa',
"lat": '27.964157',
"lng": '-82.452606',
"description": 'Tampa International Airport, Tampa'
}];
window.onload = function () {
var mapOptions = {
center: new google.maps.LatLng(markers[0].lat, markers[0].lng),
zoom: 9,
mapTypeId: google.maps.MapTypeId.Streapmap
};
var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
var infoWindow = new google.maps.InfoWindow();
var lat_lng = new Array();
var latlngbounds = new google.maps.LatLngBounds();
for (i = 0; i < markers.length; i++) {
var data = markers[i]
var myLatlng = new google.maps.LatLng(data.lat, data.lng);
lat_lng.push(myLatlng);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: data.title
});
latlngbounds.extend(marker.position);
(function (marker, data) {
google.maps.event.addListener(marker, "click", function (e) {
infoWindow.setContent(data.description);
infoWindow.open(map, marker);
});
})(marker, data);
}
map.setCenter(latlngbounds.getCenter());
map.fitBounds(latlngbounds);
//***********ROUTING****************//
//Intialize the Path Array
var path = new google.maps.MVCArray();
//Intialize the Direction Service
var service = new google.maps.DirectionsService();
//Set the Path Stroke Color
var poly = new google.maps.Polyline({ map: map, strokeColor: 'Blue' });
//Loop and Draw Path Route between the Points on MAP
for (var i = 0; i < lat_lng.length; i++) {
if ((i + 1) < lat_lng.length) {
var src = lat_lng[i];
var des = lat_lng[i + 1];
path.push(src);
poly.setPath(path);
service.route({
origin: src,
destination: des,
travelMode: google.maps.DirectionsTravelMode.DRIVING
}, function (result, status) {
if (status == google.maps.DirectionsStatus.OK) {
for (var i = 0, len = result.routes[0].overview_path.length; i < len; i++) {
path.push(result.routes[0].overview_path[i]);
}
}
});
}
}
}
</script>
<div class="MainSliderItem2 ImagesContainerItem">
<div id="dvMap" style="width: 100%;height: 490px;position: relative;overflow: hidden;background-color: rgb(229, 227, 223);max-width: 80%;margin: 98px auto;">
</div>
</div>
</div>
</div>
本文标签： javascriptjqueryuimap set zoom levelStack Overflow
版权声明：本文标题：javascript - jquery-ui-map set zoom level - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1745381755a2656195.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论