Блог

Главная - Вопросы по программированию - Как программно присвоить атрибуту карты Google значение «greedy» без необходимости перезагрузки / реконструкции карты в javascript?

Как программно присвоить атрибуту карты Google значение «greedy» без необходимости перезагрузки / реконструкции карты в javascript?

#javascript #google-maps-api-3

#javascript #google-maps-api-3

Вопрос:

У меня есть следующий код на javascript, который используется по умолчанию, у меня есть кнопка, позволяющая пользователю легче перемещать карту (без необходимости использовать оба пальца / или CTRL) Я знаю, что есть атрибут с именем gestureHandling: "greedy" , но я не могу понять, как установить его программно с помощью javascript без предварительной настройки атрибута или перестройки / реконструирования карты, как мне это сделать?

 map = new google.maps.Map(document.getElementById('map'), {
          zoom: 15,
          center: myLatLng,
          disableDefaultUI: true,
          mapTypeControl: false
});

Ответ №1:

Сохраните свои настройки в объекте и применяйте их, когда вам нужно, используя функцию setOptions() для объекта map;

 // The Settings Object
let mapSettings = {
    zoom: 15,
    center: myLatLng,
    disableDefaultUI: true,
    mapTypeControl: false
}

// Your initial Map load
window.onload(function(){
    map = new google.maps.Map(document.getElementById('map'), mapSettings);
});

// Used when you want to apply different gesture handling
function greedyMap(){
    mapSettings.gestureHandling = 'greedy';
    map.setOptions(mapSettings);
}  
 <button onclick="greedyMap()">Example</button>

Ответ №2:

Согласно документации, gestureHandling это свойство mapOptions.

MapOptions у которых нет выделенного параметра установки / получения, можно установить с помощью setOptions 

 google.maps.event.addDomListener(document.getElementById('btn'), 'click', function() {
  map.setOptions({
    gestureHandling: 'greedy'
  });
});

фрагмент кода:

 /**
 * This sample sets the gesture handling mode to 'cooperative',
 * which means that on a mobile device, the user must swipe with one
 * finger to scroll the page and two fingers to pan the map.
 */
function initMap() {
  var myLatLng = {
    lat: -25.363,
    lng: 131.044
  };

  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: myLatLng,
    gestureHandling: 'cooperative'
  });

  var marker = new google.maps.Marker({
    position: myLatLng,
    map: map,
    title: 'Hello World!'
  });
  google.maps.event.addDomListener(document.getElementById('btn'), 'click', function() {
    console.log("before:"   map.gestureHandling);
    map.setOptions({
      gestureHandling: 'greedy'
    });
    console.log("after:"   map.gestureHandling);

  });
}  
 html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#map {
  height: 80%;
}  
 <input type="button" value="click" id="btn" />
<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qkamp;callback=initMap"></script>