javascript - 谷歌地图倾斜 View 与默认 map 类型

Question

我正在寻找 Google map API 来访问我可以在 Google map 移动应用的导航模式中找到的鸟瞰图。 (像左上角这样的:http://www.igyaan.in/33685/google-maps-for-iphone-released-on-itunes/)

我发现有“倾斜”选项可以在卫星或混合 map 类型中显示 45 度 View 。 https://developers.google.com/maps/documentation/javascript/maptypes?hl=en#45DegreeImagery

但是，有什么方法可以在默认的 ROAD map 类型中执行此操作吗？就像我上面提到的导航一样？希望世界上任何地方只要有默认 map 即可。

或者除了使用谷歌地图 API 之外，还可以通过任何其他方式来完成吗？

谢谢

Answer 1

正如您所说以及在有关 tilt 的文档中也提到的:

Controls the automatic switching behavior for the angle of incidence of the map. The only allowed values are 0 and 45. The value 0 causes the map to always use a 0° overhead view regardless of the zoom level and viewport. The value 45 causes the tilt angle to automatically switch to 45 whenever 45° imagery is available for the current zoom level and viewport, and switch back to 0 whenever 45° imagery is not available (this is the default behavior). 45° imagery is only available for SATELLITE and HYBRID map types, within some locations, and at some zoom levels. Note: getTilt returns the current tilt angle, not the value specified by this option. Because getTilt and this option refer to different things, do not bind() the tilt property; doing so may yield unpredictable effects.

引用:https://developers.google.com/maps/documentation/javascript/reference?csw=1#MapTypeControlOptions

因此，roadmap 类型是不可能的。最接近的方法是对 div 应用 css 转换，看看您是否可以接受它。

CSS:

#map_canvas {
     height: 500px;
     width: 500px;
     -webkit-transform: perspective(1000px) rotate3d(40, 1, 0, 40deg)!important;
     -moz-transform: perspective(1000px) rotate3d(40, 1, 0, 40deg)!important;
     -o-transform: perspective(1000px) rotate3d(40, 1, 0, 40deg)!important;
     transform: perspective(1000px) rotate3d(40, 1, 0, 40deg)!important;
 }
 .container {
     width:500px;
     height:500px;
 }

JS:

var map;
function initialize() {
    var mapOptions = {
        center: new google.maps.LatLng(45.518970, -122.672899),
        zoom: 18,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        disableDefaultUI: true
    };
    map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);

演示:http://jsfiddle.net/lotusgodkk/x8dSP/3536/

这不是您需要的解决方案，但更接近您需要的解决方案。