gpt4 book ai didi

javascript - 谷歌地图 : change from map view to satellite view

转载 作者:行者123 更新时间:2023-12-01 02:19:29 25 4
gpt4 key购买 nike

我有一个带有 javascript 的谷歌地图,我想在放大 100%(完全缩放)后将模式 map 从 map View 更改为卫星 View ,如何在以下 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://www.google.com/intl/en_us/mapfiles/ms/micons/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);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://maps.google.com/maps/api/js?libraries=places&region=uk&language=en&sensor=true"></script>

<div id="map_canvas" style="height: 400px;width: 500px;"></div>

最佳答案

如果当前缩放级别大于或等于 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
}
}
});;

updated fiddle

代码片段:

//////// 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://www.google.com/intl/en_us/mapfiles/ms/micons/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%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.google.com/maps/api/js?libraries=places&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map_canvas"></div>
<div id="info"></div>

关于javascript - 谷歌地图 : change from map view to satellite view,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29582771/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com