將Google地圖嵌入網頁,滾動滑鼠第三鍵鎖定不縮放

梅問題-將Google地圖嵌入網頁,滾動滑鼠第三鍵鎖定不縮放「鎖定Google Map iframe」滑鼠滾動放大檢視
  Google地圖的圖資相當的完整,同時還可將地圖嵌入到網站中,因此有不少店家,會將店家的地圖內嵌到自家的網站中,讓消費者方便找到地址,而現在的滑鼠都有第三鍵的功能,因此當滾動第三鍵時,除了可以滾動網頁畫面外,也可快速的縮放地圖,但有店家將地圖放太大,上下沒什麼太多的空白的畫面時,無論是桌機還是手機,就會陷入地圖的縮放深淵中,怎麼也跳脫不出來。
  這時候就一點也不怎貼心了,這問題也困擾了梅干許久,於是就上網爬了好多資料後,終於找到了解決此問題的方法,因此有將地圖嵌入到網站的朋友們,現在也趕快來看看,要怎解決這個擾人的問題吧!
Step1
首先,進到Google Map找到所需的位置後,並選擇嵌入地圖,再把輸入框的原始碼複製起來。
梅問題-將Google地圖嵌入網頁,滾動滑鼠第三鍵鎖定不縮放「鎖定Google Map iframe」滑鼠滾動放大檢視
Step2
再將剛所複製的原始碼,貼到gmap的div中。
<div class="gmap">
<!-- Google map iframe -->
....
</div>

Step3
將下方的CSS貼到網站中。
.gmap iframe{
  width: 100%;
  display: block;
  pointer-events: none;
  position: relative;
}
.gmap iframe.clicked{
  pointer-events: auto;
}

Step4
這時再把javascript貼到body結尾上方。
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
	$(function(){
		$('.gmap').click(function(){
			$(this).find('iframe').addClass('clicked')}).mouseleave(function(){
			$(this).find('iframe').removeClass('clicked');
		});
	});
</script>

Step5
完成後,當滑鼠游標在地圖上方,並滾動滑鼠第三鍵時,都不會縮放地圖。
梅問題-將Google地圖嵌入網頁,滾動滑鼠第三鍵鎖定不縮放「鎖定Google Map iframe」滑鼠滾動放大檢視
Step6
當要縮放地圖時,對著iframe點一下滑鼠左鍵,就可解除鎖定,這時就可任意的縮放地圖並檢視啦!
梅問題-將Google地圖嵌入網頁,滾動滑鼠第三鍵鎖定不縮放「鎖定Google Map iframe」滑鼠滾動放大檢視
[範例預覽]

相關文章

jQeury外掛「imagesLoaded」解決瀑布流圖片未載入完造成區塊覆蓋問題

jQeury外掛「imagesLoaded」解決瀑布流圖片未載入完造成區塊覆蓋問題

Bootstrap滾動頁籤加入hash動態變換網址,更有助於SEO

Bootstrap滾動頁籤加入hash動態變換網址,更有助於SEO

「Retina.js」網頁圖片支援Retina螢幕,並自動切換高解影像

「Retina.js」網頁圖片支援Retina螢幕,並自動切換高解影像

jQuery取得各裝置視窗實際顯示的寬度、高度

jQuery取得各裝置視窗實際顯示的寬度、高度

「Lazy Load CSS」非同步載入CSS,當網頁使用雲端字型更順暢

「Lazy Load CSS」非同步載入CSS,當網頁使用雲端字型更順暢





回應本篇 »

(姓名)*必填
(信箱)*必填
(網站)

※PS: 因梅干時間有限,教學網中所分享的主題繁多(所遇狀況也很多),可能無法一一回答各位,不便之處還請見諒。
※PS: 本教學網不提供「破解檔」、「註冊機」或「註冊碼」等資訊,請勿利用留言索取檔案。

共 1 梅留言

  • 第1梅
    AzureBlue 說道:

    [範例預覽]沒有連結耶QQ

    回應:
    感謝告知已補上

近期講座

近期講座

更多講座