Javascript, 網頁設計

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

2017/02/13
梅問題-將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」滑鼠滾動放大檢視
[範例預覽]