谷歌地图移动视图答案

【问题标题】：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)); 
}
}

【问题讨论】：

你需要设置边界。 stackoverflow.com/questions/1556921/…
我试过绑定你可以在我的代码中看到@LukeP.Issac
您需要获取您在 for 循环中创建的所有标记位置，在一个变量中，然后在 for 循环结束后使用 map.fitBounds(variable)。检查stackoverflow.com/questions/1556921/…

标签： javascript jquery google-maps

【解决方案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
 });
}

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

【讨论】：