Google地图：将地图视图更改为卫星视图 [英] Google maps: change from map view to satellite view

查看：159
本文介绍了Google地图：将地图视图更改为卫星视图的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有一个带有JavaScript的Google地图，我想在放大100％之后（完全缩放）将地图视图中的模式地图更改为卫星视图，以下JavaScript代码如何完成它？



DEMO： http://jsfiddle.net/keL4L2h0/

< pre class =snippet-code-js lang-js prettyprint-override> ////////正在载入Google地图//////////////// ////////////////////////////////////////////////// //（函数（）{var latitude = $（'input [name =latitude]'）。val（）; var longitude = $（'input （纬度：38.341656192795924），lng =（经度：经度：-122.68604278564453），latlng =新增google.maps.LatLng（lat，lng），图片='http://www.google.com/intl/zh_CN/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 ）;其他{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结果，状态）; 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）;} }）; }）;函数moveMarker（placeName，latlng）{marker.setIcon（image）; marker.setPosition（经纬度）; infowindow.setContent（地名）; //map.panTo（new google.maps.LatLng（lat，lng））; //infowindow.open(map，marker）; }}）;

< script src =https： aaax.ltgl / js？libraries = places& region = uk& language = en& sensor = true>< / script>< div id =map_canvasstyle =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）; //禁用45度图像
} 
} 
}）;;

更新的小提琴



代码段： 

  ////////加载谷歌地图////////////////// $（function（）{var latitude = $（'input [name = latitude]'）.val（）; var longitude = $（'input [name =longitude]'）.val（）; var lat =（纬度纬度：38.341656192795924），lng =（经度？ -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：（纬度？16：7），panControl：false，zoomControl：true，zoomControlOptions：{style：google.maps.ZoomControlStyle.LARGE}，streetViewControl： false，overviewMapCont rol：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（）;函数moveMarker（placeName，latlng）{marker.setIcon（image）; marker.setPosition（经纬度）; infowindow.setContent（地名）; }}）;

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>< / script>< div id =map_canvas>< / div>< div id =info>< / div>


I have a google map with javascript and i want after zoom in 100%,(full zoom) change the mode map from map view to satellite view, how done it in following javascript code?

DEMO: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>

解决方案

If the current zoom level is greater than or equal to the maximum zoom level of the ROADMAP MapType, change the mapType to 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

code snippet:

//////// 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"></script>
<div id="map_canvas"></div>
<div id="info"></div>

这篇关于Google地图：将地图视图更改为卫星视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆