如何以编程方式将 Google 地图属性设置为 'greedy' 而无需 reload/reconstruct javascript 中的地图？

Question

我在 javascript 中有以下代码，这是我的默认代码，我有一个按钮供用户更轻松地移动地图（无需同时使用 fingers/or CTRL）我知道有一个名为 gestureHandling: "greedy" 的属性，但我不知道如何在不预设属性或 rebuild/reconstruct 地图的情况下使用 javascript 以编程方式设置它，我该怎么做？

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

Answer 1

将您的设置存储在一个对象中，并在您需要在地图对象上使用 setOptions() 函数时应用它们；

// 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>

Answer 2

根据文档，gestureHandling is a MapOptions 属性。

没有专用 setter/getter 的

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=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap"></script>

如何以编程方式将 Google 地图属性设置为 'greedy' 而无需 reload/reconstruct javascript 中的地图？

How to set the Google Map Attribute to 'greedy' programatically without having to reload/reconstruct the map in javascript?

javascript

google-maps-api-3