[google-maps] 내장 된 Google지도에서 마우스 스크롤 휠 줌 비활성화

저자가 대부분의 게시물에 iFrame을 사용하여 Google지도를 삽입하는 WordPress 사이트에서 작업하고 있습니다.

Javascript를 사용하여 마우스 스크롤 휠을 통해 줌을 비활성화하는 방법이 있습니까?

답변

같은 문제가 발생했습니다. 페이지를 스크롤하면 포인터가 맵 위에 오면 페이지를 계속 스크롤하는 대신 맵을 확대 / 축소하기 시작합니다. 🙁

그래서 이것은 퍼팅 해결 div으로 .overlay정확히 각 GMAP의 전에 iframe삽입을 참조하십시오

<html>
  <div class="overlay" onClick="style.pointerEvents='none'"></div>
  <iframe src="https://mapsengine.google.com/map/embed?mid=some_map_id" width="640" height="480"></iframe>
</html>

내 CSS에서 클래스를 만들었습니다.

.overlay {
   background:transparent;
   position:relative;
   width:640px;
   height:480px; /* your iframe height */
   top:480px;  /* your iframe height */
   margin-top:-480px;  /* your iframe height */
}

div는지도를 덮어 포인터 이벤트가 도착하지 못하게합니다. 그러나 div를 클릭하면 포인터 이벤트가 투명 해져 맵이 다시 활성화됩니다!

나는 당신을 도울 수 있기를 바랍니다 🙂

답변

나는이 토론에서 첫 번째 답변을 시도했지만 내가 한 일에 관계없이 효과가 없었습니다. 내 솔루션을 생각해 냈습니다.

클래스 (이 예에서는 .maps) 이상적으로 embedresponsively 코드로 iframe이 랩 : http://embedresponsively.com/ – 변경을 설정하려면 iframe의 CSS를 pointer-events: none하고 부모 요소에 jQuery의 클릭 기능을 사용하면 iframe을 CSS를 변경할 수 있습니다 에pointer-events:auto

HTML

<div class='embed-container maps'>
    <iframe width='600' height='450' frameborder='0' src='http://foo.com'></iframe>
</div>

CSS

.maps iframe{
    pointer-events: none;
}

jQuery

$('.maps').click(function () {
    $('.maps iframe').css("pointer-events", "auto");
});

$( ".maps" ).mouseleave(function() {
  $('.maps iframe').css("pointer-events", "none");
});

누군가가 자유롭게 느끼기를 원한다면 JavaScript 전용 방법이 있다고 확신합니다.

포인터 이벤트를 재 활성화하는 JavaScript 방법은 매우 간단합니다. iFrame에 ID를 제공 한 다음 (예 : “iframe”) onclick 이벤트를 cointainer div에 적용하십시오.

onclick="document.getElementById('iframe').style.pointerEvents= 'auto'"

<div class="maps" onclick="document.getElementById('iframe').style.pointerEvents= 'auto'">
   <iframe id="iframe" src="" width="100%" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>

답변

@nathanielperales 솔루션을 확장했습니다.

동작 설명 아래 :

스크롤을 사용하려면지도를 클릭하십시오
마우스가지도를 떠날 때 스크롤 비활성화

자바 스크립트 코드 아래 :

// Disable scroll zooming and bind back the click event
var onMapMouseleaveHandler = function (event) {
  var that = $(this);

  that.on('click', onMapClickHandler);
  that.off('mouseleave', onMapMouseleaveHandler);
  that.find('iframe').css("pointer-events", "none");
}

var onMapClickHandler = function (event) {
  var that = $(this);

  // Disable the click handler until the user leaves the map area
  that.off('click', onMapClickHandler);

  // Enable scrolling zoom
  that.find('iframe').css("pointer-events", "auto");

  // Handle the mouse leave event
  that.on('mouseleave', onMapMouseleaveHandler);
}

// Enable map zooming with mouse scroll when the user clicks the map
$('.maps.embed-container').on('click', onMapClickHandler);

그리고 여기 jsFiddle 예제가 있습니다.

답변

#nathanielperales가 작성한 코드를 다시 편집하고 있습니다. 간단하고 잡기 쉽지만 한 번만 작동합니다. 그래서 JavaScript에 mouseleave ()를 추가했습니다. 아이디어는 #Bogdan에서 채택되었으며 이제는 완벽합니다. 이 시도. 크레딧은 #nathanielperales와 #Bogdan으로갑니다. 방금 두 아이디어를 결합했습니다. 감사합니다. 이것이 다른 사람들에게도 도움이되기를 바랍니다 …

HTML

<div class='embed-container maps'>
    <iframe width='600' height='450' frameborder='0' src='http://foo.com'>  </iframe>
</div>

CSS

.maps iframe{
    pointer-events: none;
}

jQuery

$('.maps').click(function () {
    $('.maps iframe').css("pointer-events", "auto");
});

$( ".maps" ).mouseleave(function() {
  $('.maps iframe').css("pointer-events", "none");
});

즉흥 연습-적응-극복

그리고 여기 jsFiddle 예제가 있습니다.

답변

예, 아주 쉽습니다. 나는 비슷한 문제에 직면했다. css 속성 “pointer-events” 를 iframe div에 추가하고 ‘none’으로 설정하십시오 .

예 : <iframe style = “pointer-events : none”src = ……..>

참고 :이 수정은지도에서 다른 모든 마우스 이벤트를 비활성화합니다. 우리는지도에서 사용자 상호 작용을 필요로하지 않았기 때문에 저에게 효과적이었습니다.

답변

var mapOptions = {
   scrollwheel: false,
   center: latlng,
   mapTypeId: google.maps.MapTypeId.ROADMAP
};

답변

몇 가지 연구를 한 후에는 두 가지 옵션이 있습니다. iframe 삽입이 포함 된 새지도 API는 마우스 휠 비활성화를 지원하지 않는 것 같습니다.

먼저 오래된 Google지도를 사용하는 것입니다 ( https://support.google.com/maps/answer/3045828?hl=ko ).

두 번째 는 각 주석에 대한 맵 임베딩을 단순화하고 매개 변수를 사용하는 자바 스크립트 함수를 만드는 것입니다 (정확한 솔루션을 표시하지 않는 위치를 가리키는 샘플 코드입니다)

function createMap(containerid, parameters) {
  var mymap = document.getElementById(containerid),
  map_options = {
    zoom: 13,
    scrollwheel: false,
    /* rest of options */
  },
  map = new google.maps.Map(mymap, map_options);

  /* 'rest of code' to take parameters into account */
}