無効マウスホイールのズームにGoogle MapsのAPIを使用する方法

その他 2020-01-11 13:27:03 訪問数: null

私は、ページ上のいくつかのマップを描画するためにGoogle MapsのAPI（V3）を使用しています。地図上でマウスホイールをスクロールしながら、私がやりたいことの一つは、ズーム無効ですが、私は方法がわからないんだけど。

私は（つまり、削除されたズームUI要素）が無効scaleControlを持っているが、これは、ホイールズームを防ぐことはできません。

これは私の機能の一部（それは、単純なjQueryプラグインである）です。 

$.fn.showMap = function(options, addr){
  options = $.extend({
    navigationControl: false,
    mapTypeControl: false,
    scaleControl: false,
    draggable: false,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }, options);
  var map = new google.maps.Map(document.getElementById($(this).attr('id')), options);

  // Code cut from this example as not relevant
};

＃1階

地図APIの第3版では、あなたがする必要がありMapOptionsでプロパティscrollwheelオプションがfalseに設定されます。

options = $.extend({
    scrollwheel: false,
    navigationControl: false,
    mapTypeControl: false,
    scaleControl: false,
    draggable: false,
    mapTypeId: google.maps.MapTypeId.ROADMAP
}, options);

あなたがマップのAPIバージョン2を使用している場合は、使用する必要がありますdisableScrollWheelZoom（）以下のように、API呼び出しを：

map.disableScrollWheelZoom();

scrollwheelそれが明示的に有効または無効である場合を除き、デフォルトでは下のスケールは、バージョン3 APIは、しかし、第二版では、マップで有効にenableScrollWheelZoom()API呼び出しを。

ハウス＃2

私の場合は、キーを設定することで'scrollwheel':false初期化のために'scrollwheel':false。注：私は使用していますjQuery UI Map。ここに私のあるCoffeeScriptの init関数ヘッダーは：

 $("#map_canvas").gmap({'scrollwheel':false}).bind "init", (evt, map) ->

ハウス＃3

ケースでは、動的にそれをやってみたいです。 

function enableScrollwheel(map) {
    if(map) map.setOptions({ scrollwheel: true });
}

function disableScrollwheel(map) {
    if(map) map.setOptions({ scrollwheel: false });
}

時には、あなたはいくつかの「複雑」物事が（またはマップは、レイアウトのごく一部である）、スクロール、ズームの真ん中に位置して地図上に表示する必要がありますが、あなたはクリーンなマップを持っていたら、このようにズームすることが良いでしょう。

＃4階

物事を単純化するために！オリジナルGoogleマップ変数、余分なもの。

 var mapOptions = {
     zoom: 16,
     center: myLatlng,
     scrollwheel: false

}

ハウス＃5

念のため、使用しているGMaps.jsのが容易など、ジオコーディングを行うと、ピンの動作をカスタマイズすることを可能にするライブラリーを、ここではこの問題を解決するために、以前の回答から学ぶための技術の使用です。

var Gmap = new GMaps({
  div: '#main-map', // FYI, this setting property used to be 'el'. It didn't need the '#' in older versions
  lat: 51.044308,
  lng: -114.0630914,
  zoom: 15
});

// To access the Native Google Maps object use the .map property
if(Gmap.map) {
  // Disabling mouse wheel scroll zooming
  Gmap.map.setOptions({ scrollwheel: false });
}

ハウス＃6

私はあなたがロックに素敵なボタンを使用するか、マップのロックを解除することができ、より開発されたjQueryプラグインを作成しました。

このプラグインは、透明オーバーレイDIV IFRAME Googleマップで無効にし、unlockitにボタンを追加しています。あなたはそれをアンロックするために650ミリ秒を押す必要があります。

あなたは使いやすさのためにすべてのオプションを変更することができます。ご覧くださいhttps://github.com/diazemiliano/googlemaps-scrollpreventを見ます

ここではいくつかの例があります。 

 (function() { $(function() { $("#btn-start").click(function() { $("iframe[src*='google.com/maps']").scrollprevent({ printLog: true }).start(); return $("#btn-stop").click(function() { return $("iframe[src*='google.com/maps']").scrollprevent().stop(); }); }); return $("#btn-start").trigger("click"); }); }).call(this); 
 .embed-container { position: relative !important; padding-bottom: 56.25% !important; height: 0 !important; overflow: hidden !important; max-width: 100% !important; } .embed-container iframe { position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; } .mapscroll-wrap { position: static !important; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="https://cdn.rawgit.com/diazemiliano/googlemaps-scrollprevent/v.0.6.5/dist/googlemaps-scrollprevent.min.js"></script> <div class="embed-container"> <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d12087.746318586604!2d-71.64614110000001!3d-40.76341959999999!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x9610bf42e48faa93%3A0x205ebc786470b636!2sVilla+la+Angostura%2C+Neuqu%C3%A9n!5e0!3m2!1ses-419!2sar!4v1425058155802" width="400" height="300" frameborder="0" style="border:0"></iframe> </div> <p><a id="btn-start" href="#">"Start Scroll Prevent"</a> <a id="btn-stop" href="#">"Stop Scroll Prevent"</a> </p>

＃7の構築

誰かがこの純粋なCSSを解決するソリューションに興味があるという理由だけで。次のコードは、マップ上に透明のdivによって覆われており、ときに透明のdivにマップの背面に移動します。スケーリングオーバーレイ防止は、1回クリックして、マップの後ろに、あなたはズームを有効にすることができます。

私のブログの記事を参照してください、GoogleマップのズームスイッチやCSSは、それがどのように動作するかを説明し、ペンを使用codepen.io/daveybrown/pen/yVryMrの作業プレゼンテーションを。

免責事項：これは、学習のために主に生産現場に最適なソリューションではないかもしれません。

HTML： 

<div class="map-wrap small-11 medium-8 small-centered columns">
    <input id="map-input" type="checkbox" />
    <label class="map-overlay" for="map-input" class="label" onclick=""></label>
    <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d19867.208601651986!2d-0.17101002911118332!3d51.50585742500925!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2suk!4v1482355389969"></iframe>
</div>

CSS： 

.map-wrap {
    position: relative;
    overflow: hidden;
    height: 180px;
    margin-bottom: 10px;
}

#map-input {
    opacity: 0;
}

.map-overlay {
    display: block;
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden;
    z-index: 2;    
}

#map-input[type=checkbox]:checked ~ iframe {
    z-index: 3;
}

#map-input[type=checkbox]:checked ~ .map-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
}


iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    z-index: 1;
    border: none;
}

＃8の構築

どのように無効に知りたい人のために人のJavascript GoogleマップAPIの

一度マップをクリックすると、それがされます有効ズームスクロールを。そして、ときにマウスの終了は、DIV 無効。

ここでいくつかの例を示します。 

 var map; var element = document.getElementById('map-canvas'); function initMaps() { map = new google.maps.Map(element , { zoom: 17, scrollwheel: false, center: { lat: parseFloat(-33.915916), lng: parseFloat(151.147159) }, }); } //START IMPORTANT part //disable scrolling on a map (smoother UX) jQuery('.map-container').on("mouseleave", function(){ map.setOptions({ scrollwheel: false }); }); jQuery('.map-container').on("mousedown", function() { map.setOptions({ scrollwheel: true }); }); //END IMPORTANT part 
 .big-placeholder { background-color: #1da261; height: 300px; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <html> <body> <div class="big-placeholder"> </div> <!-- START IMPORTANT part --> <div class="map-container"> <div id="map-canvas" style="min-height: 400px;"></div> </div> <!-- END IMPORTANT part--> <div class="big-placeholder"> </div> <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAIjN23OujC_NdFfvX4_AuoGBbkx7aHMf0&callback=initMaps"> </script> </body> </html>

ハウス＃9

簡単な解決策： 

 // DISABLE MOUSE SCROLL IN MAPS // enable the pointer events only on click; $('.gmap-wrapper').on('click', function () { $('.gmap-wrapper iframe').removeClass('scrolloff'); // set the pointer events true on click }); // you want to disable pointer events when the mouse leave the canvas area; $(".gmap-wrapper").mouseleave(function () { $('.gmap-wrapper iframe').addClass('scrolloff'); // set the pointer events to none when mouse leaves the map area }); 
 .scrolloff{ pointer-events: none; } 
 <html> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="gmap-wrapper"> <iframe class="scrolloff" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d44754.55736493158!2d9.151166379101554!3d45.486726!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4786bfca7e8fb1cb%3A0xee8d99c9d153be98!2sCorsidia!5e0!3m2!1sit!2sit!4v1496947992608" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe> </div> </html>

出典：HTTPS：//github.com/Corsidia/scrolloff

ハウス＃10

そのコードを使用して、それはすべての色のグーグルマップを提供し、あなたのためのコントロールをズームします。（ScaleControl：falseにし、スクロールホイール：偽のは、マウスのホイールを防止または縮小されます）

 function initMap() { // Styles a map in night mode. var map = new google.maps.Map(document.getElementById('map'), { center: {lat: 23.684994, lng: 90.356331}, zoom: 8, scaleControl: false, scrollwheel: false, styles: [ {elementType: 'geometry', stylers: [{color: 'F1F2EC'}]}, {elementType: 'labels.text.stroke', stylers: [{color: '877F74'}]}, {elementType: 'labels.text.fill', stylers: [{color: '877F74'}]}, { featureType: 'administrative.locality', elementType: 'labels.text.fill', stylers: [{color: '#d59563'}] }, { featureType: 'poi', elementType: 'labels.text.fill', stylers: [{color: '#d59563'}] }, { featureType: 'poi.park', elementType: 'geometry', stylers: [{color: '#263c3f'}] }, { featureType: 'poi.park', elementType: 'labels.text.fill', stylers: [{color: '#f77c2b'}] }, { featureType: 'road', elementType: 'geometry', stylers: [{color: 'F5DAA6'}] }, { featureType: 'road', elementType: 'geometry.stroke', stylers: [{color: '#212a37'}] }, { featureType: 'road', elementType: 'labels.text.fill', stylers: [{color: '#f77c2b'}] }, { featureType: 'road.highway', elementType: 'geometry', stylers: [{color: '#746855'}] }, { featureType: 'road.highway', elementType: 'geometry.stroke', stylers: [{color: 'F5DAA6'}] }, { featureType: 'road.highway', elementType: 'labels.text.fill', stylers: [{color: 'F5DAA6'}] }, { featureType: 'transit', elementType: 'geometry', stylers: [{color: '#2f3948'}] }, { featureType: 'transit.station', elementType: 'labels.text.fill', stylers: [{color: '#f77c2b3'}] }, { featureType: 'water', elementType: 'geometry', stylers: [{color: '#0676b6'}] }, { featureType: 'water', elementType: 'labels.text.fill', stylers: [{color: '#515c6d'}] }, { featureType: 'water', elementType: 'labels.text.stroke', stylers: [{color: '#17263c'}] } ] }); var marker = new google.maps.Marker({ position: {lat: 23.684994, lng: 90.356331}, map: map, title: 'BANGLADESH' }); }

ハウス＃11

私は簡単な例でこれを行います

jQueryの 

$('.map').click(function(){
    $(this).find('iframe').addClass('clicked')
    }).mouseleave(function(){
    $(this).find('iframe').removeClass('clicked')
});

CSS 

.map {
    width: 100%; 
}
.map iframe {
    width: 100%;
    display: block;
    pointer-events: none;
    position: relative; /* IE needs a position other than static */
}
.map iframe.clicked {
    pointer-events: auto;
}

またはオプションGMAPを使用 

function init() { 
    var mapOptions = {  
        scrollwheel: false,

ハウス＃12

あなただけのマップのオプションを追加する必要があります。 

scrollwheel: false

ハウス＃13

（2017年10月）今のところ、Googleはと呼ばれる、ズーム/スクロールを処理するために、特定のプロパティを実装しましたgestureHandling。目的は、モバイルデバイスのオペレーティングに対処することですが、それはまた、デスクトップブラウザの動作を変更します。これは、公式ドキュメント：

 function initMap() { var locationRio = {lat: -22.915, lng: -43.197}; var map = new google.maps.Map(document.getElementById('map'), { zoom: 13, center: locationRio, gestureHandling: 'none' });

gestureHandling値が用意されています。

  • 'greedy'：ときユーザースライド（ドラッグ）画面上で、常にパンマップ（上または下は、左または右）。言い換えれば、2本の指でスライドとスライド単一の指は、マップがパンになります。
  • 'cooperative'：ユーザは、1本の指で地図をスクロールしてパンする2本の指をスライドさせなければなりません。ユーザーが指一本でマップをスライドした場合、そこに地図上にオーバーレイすること、およびマップを移動するには2本の指を使用するユーザーを促します。デスクトップアプリケーションでは、ユーザーが同時にマップをズームしたりパンする修飾キー（Ctrlキーまたは⌘キー）スクロールを押すことができます。
  • 'none' ：このオプションは、パン無効にし、モバイルデバイス上のマップ、およびドラッグデスクトップ上の地図を混練。
  • 'auto'（デフォルト値）：ページのスクロール、GoogleマップのJavaScript APIはにプロパティをgestureHandlingするかどうかに応じて、'cooperative'または'greedy'

要するに、あなたは簡単に（必須「常にスケーラブル」を設定することができます'greedy'）、「決してズーム」（ 'none'）、または（「ユーザーがズームを有効にするには、⌘/ CRTLを押してください」 'cooperative'）。

ハウス＃14

ダニエル・コードこの作業を完了するために（おかげでたくさん！）。しかし、私は完全にズームを無効にしたいです。私はこれを行うためにすべての4つのオプションを使用する必要があることを見つけます：

{
  zoom: 14,                        // Set the zoom level manually
  zoomControl: false,
  scaleControl: false,
  scrollwheel: false,
  disableDoubleClickZoom: true,
  ...
}

参照：MapOptionsは、オブジェクトの仕様

p15097962069
オリジナルの記事は、0公表 ・ ウォンの賞賛0 ・ ビュー2218
私信 关注

おすすめ

転載: blog.csdn.net/p15097962069/article/details/103920962
おすすめ
大規模な言語モデルに基づくオープンソースのナレッジベースの質問と回答システムである MaxKB GitHub Star の数が 5,000 を超えました。
ランキング
短线选股的一种方法
Javaクライアントでのユーバーのリズムワークフローで睡眠時間をキャンセルし、再スケジュール
CALIPSOデータバッチダウンロード方式
LeetCode アルゴリズム再帰クラス - ソードはオファー 26 を参照します。 ツリーの部分構造
HTMLのインポート外部CSS、JavaScriptの論文
PostgreSQL 13.1、12.5、11.10、10.15、9.6.20、および9.5.24がリリースされました
アップルは、エラーメッセージがポテトに接続されていた実行する方法ポテトポテトショーをダウンロードすることができません
あなたは空腹で突然電話を切っていますか？これはテクノロジーの裏側ですか、それともテスト用の銃ですか？
VIMエディタのヒント
動的計画法の最長共通部分列（LCS）
アーカイブ
もっと
2024-05-13(8)
2024-05-12(27)
2024-05-11(31)
2024-05-10(33)
2024-05-09(30)
2024-05-08(18)
2024-05-07(34)
2024-05-06(6)
2024-05-05(0)
2024-05-04(18)

コードワールド

© 2018 codetd.com