BloggerAds

2011年6月25日 星期六

Google Map JavaScript API v3 實作滑鼠右鍵(Right Click)選單

要實作Google Map的右鍵選單，可參考下列做法，在實作之前，先做好Google Map API的一些基本動作，不熟的人可以參考之前的文章中1. Google Map  初始化這段。接著就可以參考下面的動作了。


首先可以先設定一個CSS的Class，如下：
.contextMenu {
       position: absolute;
       min-width: 100px;
       z-index: 1000;  /* 必要 */
       background: #fff;
       border-top: solid 1px #CCC;
       border-left: solid 1px #CCC;
       border-bottom: solid 1px #676767;
       border-right: solid 1px #676767;
       padding: 0px;
       margin: 0px;
       display:none;    /* 預設為不顯示 */
       font-size:smaller;
}
其中有個很重要的一點，就是z-index這個屬性一定要給，如果沒給的話，不管你怎麼按右鍵、改程式，選單都不會出來。原因的話，我還沒查到...= = (這是心路歷程)。

再來可以寫一個DIV，就是要在滑鼠右鍵按下( Right Click)時顯示的選單，把class設剛剛寫好的CSS Class：
<div id="rightMenu" class="contextMenu">
    <a>設為起點</a>    
    <a>設為終點</a>   
</div>
在接下來的JavaScript部份，因為有使用jQuery語法，所以必須要include jQuery，請在<head>中加入這一行程式：
<script type="text/javascript" src="jquery-1.6.1.min.js"></script>
接下來就是JavaScript部份了：
<script language='javascript'>
    var contextMenu = $("#rightMenu");    //宣告物件
    $(map.getDiv()).append(contextMenu);          
  
    //加入事件
    google.maps.event.addListener(map, "rightclick", function(e) {     
        //先隱藏div
        contextMenu.hide();

        var mapDiv = $(map.getDiv());
        var x = e.pixel.x;
        var y = e.pixel.y;              

        //當選單太靠近邊界時，調整選單位置
        if (x > mapDiv.width() - contextMenu.width()) {
            x -= contextMenu.width();
        }
        if (y > mapDiv.height() - contextMenu.height()) {
            y -= contextMenu.height();
        }
        //設定座標，並加入動畫
        contextMenu.css({ top: y, left: x }).fadeIn(100);                    
    });

    //當下列事件觸發時，隱藏選單
    $.each('click dragstart zoom_changed maptypeid_changed'.split(' '),  
        function(i, name) {
            google.maps.event.addListener(map, name, function() {
                contextMenu.hide()
            });
    });
</script>
參考資料：
http://www.pinsoftstudios.com/tips/google-maps-api-v3-right-click-context-menu
張貼者： 於
標籤：

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)