谷歌地图移动视图

Posted 2023-02-23

【中文标题】谷歌地图移动视图

【英文标题】：Google Map mobile view

【发布时间】：2018-08-23 20:44:00

【问题描述】：

我正在使用 Google Map API V3 和样式，我正在使用 Snazzy Maps。 我在多个位置使用多个标记。 一切都很好，工作正常我现在只想在移动屏幕上显示所有标记，必须用两根手指拖动屏幕才能在移动设备中定位位置。

有没有办法调整移动设备的缩放级别？

提前致谢。

这是我的代码。

function initMap() 

var usa = lat: 38.6318618, lng: -98.318221;
var pacificOcean= new google.maps.LatLng(39.964202, -130.271346);
var atlanticOcean= new google.maps.LatLng(37.391290, -58.478699);


var alabama = 
    info: '<p class="m_title">Alabama</p>\
                <p class="m_desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</p>\
                <a class="m_link" href="#">Learn More</a>',
    lat: 32.806671,
    long: -86.791130
;

var utslRO = 
    info: '<p class="m_title">Utah RO</p>\
                <p class="m_desc">Lorem Ipsum</p>\
                <a class="m_link" href="#">Learn More</a>',
    lat: 40.7762691,
    long: -112.2006695
;

var utccRP = 
    info: '<p class="m_title">Utah RP</p>\
                <p class="m_desc">Lorem ipsum</p>\
                <a class="m_link" href="#">Learn More</a>',
    lat: 37.6848877,
    long: -113.1720903
;

var ohio = 
    info: '<p class="m_title">Ohio</p>\
                <p class="m_desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</p>\
                <a class="m_link" href="#">Learn More</a>',
    lat: 40.388783,
    long: -82.764915
;

var locations = [
  [alabama.info, alabama.lat, alabama.long, 0],
  [utslRO.info, utslRO.lat, utslRO.long, 1],
  [utccRP.info, utccRP.lat, utccRP.long, 2],
  [ohio.info, ohio.lat, ohio.long, 3],
];

var map = new google.maps.Map(document.getElementById('map'), 
    zoom: 4.2,
    center: usa,
    bounds: new google.maps.LatLngBounds(new google.maps.LatLng(39.964202, -130.271346), google.maps.LatLng(37.391290, -58.478699)),


        draggable: true,
    mapTypeId: google.maps.MapTypeId.ROADMAP
);

var infowindow = new google.maps.InfoWindow(


);

var marker, i;

for (i = 0; i < locations.length; i++) 
    marker = new google.maps.Marker(
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        map: map,
        icon:'marker.png'
    );



    google.maps.event.addListener(marker, 'click', (function (marker, i) 
        return function () 
            infowindow.setContent(locations[i][0]);
            infowindow.open(map, marker);
        
    )(marker, i)); 

【问题讨论】：

你需要设置边界。 ***.com/questions/1556921/…

我试过绑定你可以在我的代码中看到@LukeP.Issac

您需要获取您在 for 循环中创建的所有标记位置，在一个变量中，然后在 for 循环结束后使用 map.fitBounds(variable)。检查***.com/questions/1556921/…

【参考方案1】：

我在这里想出了一个简单的 JS 技巧

function initMap() 
  var zoomVal = 4.2;
  if (window.matchMedia('(max-width: 767px)').matches) 
    zoomVal = 2.5;
  

 var map = new google.maps.Map(document.getElementById('map'), 
    zoom: zoomVal,
    center: usa,
    mapTypeId: google.maps.MapTypeId.ROADMAP
 );

它在所有移动设备上都能完美运行。