Google地图：从地图视图更改为卫星视图

我有一个谷歌地图与JavaScript，我想放大100％后，（完全缩放）将模式地图从地图视图更改为卫星视图，如何在以下javascript代码中完成？

演示： http ： //jsfiddle.net/keL4L2h0/

//////// Loading Google Map ////////////////////////////////////////////////////////////////////////////////// $(function() { var latitude = $('input[name="latitude"]').val(); var longitude = $('input[name="longitude"]').val(); var lat = (latitude ? latitude : 38.341656192795924), lng = (longitude ? longitude : -122.68604278564453), latlng = new google.maps.LatLng(lat, lng), image = 'http://sofzh.miximages.com/javascript/blue-dot.png'; //zoomControl: true; //zoomControlOptions: google.maps.ZoomControlStyle.LARGE; var mapOptions = { center: new google.maps.LatLng(lat, lng), zoom: (latitude ? 16 : 7), panControl: false, zoomControl: true, zoomControlOptions: { style: google.maps.ZoomControlStyle.LARGE }, mapTypeControl: false, streetViewControl: false, overviewMapControl: true, rotateControl: false, mapTypeId: google.maps.MapTypeId.ROADMAP }; map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions); var marker = new google.maps.Marker({ position: latlng, map: map, icon: image, draggable: true, animation: google.maps.Animation.DROP }); var input = document.getElementById('searchTextField'); var autocomplete = new google.maps.places.Autocomplete(input, { types: ["geocode"] }); autocomplete.bindTo('bounds', map); var infowindow = new google.maps.InfoWindow(); google.maps.event.addListener(autocomplete, 'place_changed', function(event) { infowindow.close(); var place = autocomplete.getPlace(); if (place.geometry.viewport) { map.fitBounds(place.geometry.viewport); } else { map.setCenter(place.geometry.location); map.setZoom(17); } moveMarker(place.name, place.geometry.location); $('.MapLat').val(place.geometry.location.lat()); $('.MapLon').val(place.geometry.location.lng()); }); google.maps.event.addListener(marker, 'dragend', function(event) { $('.MapLat').val(event.latLng.lat()); $('.MapLon').val(event.latLng.lng()); $("#searchTextField").val(''); }); google.maps.event.addListener(map, 'click', function(event) { $('.MapLat').val(event.latLng.lat()); $('.MapLon').val(event.latLng.lng()); infowindow.close(); var geocoder = new google.maps.Geocoder(); geocoder.geocode({ "latLng": event.latLng }, function(results, status) { console.log(results, status); if (status == google.maps.GeocoderStatus.OK) { console.log(results); var lat = results[0].geometry.location.lat(), lng = results[0].geometry.location.lng(), placeName = results[0].address_components[0].long_name, latlng = new google.maps.LatLng(lat, lng); moveMarker(placeName, latlng); $("#searchTextField").val(results[0].formatted_address); } }); }); function moveMarker(placeName, latlng) { marker.setIcon(image); marker.setPosition(latlng); infowindow.setContent(placeName); //map.panTo( new google.maps.LatLng( lat,lng ) ); //infowindow.open(map, marker); } }); 

Answer 1

如果当前缩放级别大于或等于ROADMAP MapType的最大缩放级别，请将mapType更改为SATELLITE：

 google.maps.event.addListener(map, 'zoom_changed', function () { var maptype = map.getMapTypeId(); if (map.getZoom() >= map.mapTypes[maptype].maxZoom) { if (map.getMapTypeId() != google.maps.MapTypeId.HYBRID) { map.setMapTypeId(google.maps.MapTypeId.HYBRID) map.setTilt(0); // disable 45 degree imagery } } });; 

更新小提琴

代码段：

 //////// Loading Google Map ////////////////// $(function() { var latitude = $('input[name="latitude"]').val(); var longitude = $('input[name="longitude"]').val(); var lat = (latitude ? latitude : 38.341656192795924), lng = (longitude ? longitude : -122.68604278564453), latlng = new google.maps.LatLng(lat, lng), image = 'http://sofzh.miximages.com/javascript/blue-dot.png'; var mapOptions = { center: new google.maps.LatLng(lat, lng), zoom: (latitude ? 16 : 7), panControl: false, zoomControl: true, zoomControlOptions: { style: google.maps.ZoomControlStyle.LARGE }, streetViewControl: false, overviewMapControl: true, rotateControl: false, mapTypeId: google.maps.MapTypeId.ROADMAP }; map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions); var marker = new google.maps.Marker({ position: latlng, map: map, icon: image, draggable: true, animation: google.maps.Animation.DROP }); google.maps.event.addListener(marker, 'click', function(evt) { map.setZoom(20); }); google.maps.event.addListener(map, 'zoom_changed', function() { var maptypes = map.mapTypes; var maptype = map.getMapTypeId(); document.getElementById('info').innerHTML = "[" + maptype + "] zoom: " + map.getZoom(); if (map.getZoom() >= map.mapTypes[maptype].maxZoom) { if (map.getMapTypeId() != google.maps.MapTypeId.HYBRID) { map.setMapTypeId(google.maps.MapTypeId.HYBRID) map.setTilt(0); // disable 45 degree imagery } } }); var infowindow = new google.maps.InfoWindow(); function moveMarker(placeName, latlng) { marker.setIcon(image); marker.setPosition(latlng); infowindow.setContent(placeName); } }); 

 body, html, #map_canvas { height: 100%; width: 100%; }