Google Maps實現(xiàn)右鍵菜單
??????? 最近在做公司項目（
www.youmonitor.us
?它可以幫助你檢測你的網(wǎng)站的穩(wěn)定性，如果你的網(wǎng)站當(dāng)了，它會給你發(fā)警報，而且是免費的，有興趣的朋友可以去看看，不是廣告，希望版主不要刪我的帖子
）的第二版，需要用到Google Maps的右鍵菜單（類似google maps官方網(wǎng)站的右鍵菜單功能
http://maps.google.com/
），但是好像google的官方API上面沒有這種示例，于是求助google的搜索引擎，找到了這篇文章：
http://www.econym.demon.co.uk/googlemaps/context.htm
，發(fā)現(xiàn)google maps自己有一個鼠標(biāo)右鍵事件：singlerightclick，文章我就不翻譯了，英文不好的朋友可以直接看它的代碼：
http://www.econym.demon.co.uk/googlemaps/examples/context.htm
。但是這篇文章還有一個美中不足，就是我希望在用戶點擊了marker以后彈出的右鍵菜單和在別的地方彈出的不一樣。類似這樣的效果：
?
?
?
?
?
?
?
?
?
?
?
?
marker上的比其它的多了Clear Search Results這一項，起初我想要使用事件傳進來的參數(shù)marker（"singlerightclick"的第三個參數(shù)是overlay?http://www.google.com/apis/maps/documentation/reference.html）來判斷：???
- GEvent.addListener(map, "singlerightclick" ,function(pixel,tile,?marker)?{ ??
- ???????? //?store?the?"pixel"?info?in?case?we?need?it?later ??
- ???????? //?adjust?the?context?menu?location?if?near?an?egde ??
- ???????? //?create?a?GControlPosition ??
- ???????? //?apply?it?to?the?context?menu,?and?make?the?context?menu?visible ??
- ????????clickedPixel?=?pixel; ??
- ????????var?x=pixel.x; ??
- ????????var?y=pixel.y; ??
- ???????? if ?(x?>?map.getSize().width?-? 120 )?{?x?=?map.getSize().width?-? 120 ?} ??
- ???????? if ?(y?>?map.getSize().height?-? 100 )?{?y?=?map.getSize().height?-? 100 ?} ??
- ????????var?pos?=? new ?GControlPosition(G_ANCHOR_TOP_LEFT,? new ?GSize(x,y));?? ??
- ????????pos.apply(contextmenu); ??
- ???? if (marker){ ??
- ????????????contextmenu.style.visibility?=? "visible" ; ??
- ????} ??
- ??????});??
但是好像行不通，不管在不在marker上點擊鼠標(biāo)右鍵if(marker)永遠成立，這可把我難住了，怎么辦呢？經(jīng)過一番的探索我發(fā)現(xiàn)這個事件的第二個參數(shù)"src"里面有一個property叫做:__marker__，是不是這就是我要找的?于是我就把代碼改成這個樣子：
?
- if ?(GBrowserIsCompatible())?{ ??
- ??
- ?????? //?===?Global?variable?that?can?be?used?by?the?context?handling?functions?== ??
- ??????var?clickedPixel;? ??
- ??
- ??????var?map?=? new ?GMap2(document.getElementById( "map" )); ??
- ??????map.addControl( new ?GLargeMapControl()); ??
- ??????map.addControl( new ?GMapTypeControl()); ??
- ??????map.setCenter( new ?GLatLng( 43 ,- 79 ), 8 ); ??
- ??????var?marker?=? new ?GMarker( new ?GLatLng( 43 ,- 79 ),{title: "center" });? ??
- ??????map.addOverlay(marker); ??
- ??????... ??
- ?????? //?===?listen?for?singlerightclick?=== ??
- ??????GEvent.addListener(map, "singlerightclick" ,function(pixel,tile,?marker)?{ ??
- ???????? //?store?the?"pixel"?info?in?case?we?need?it?later ??
- ???????? //?adjust?the?context?menu?location?if?near?an?egde ??
- ???????? //?create?a?GControlPosition ??
- ???????? //?apply?it?to?the?context?menu,?and?make?the?context?menu?visible ??
- ????????clickedPixel?=?pixel; ??
- ????????var?x=pixel.x; ??
- ????????var?y=pixel.y; ??
- ???????? if ?(x?>?map.getSize().width?-? 120 )?{?x?=?map.getSize().width?-? 120 ?} ??
- ???????? if ?(y?>?map.getSize().height?-? 100 )?{?y?=?map.getSize().height?-? 100 ?} ??
- ????????var?pos?=? new ?GControlPosition(G_ANCHOR_TOP_LEFT,? new ?GSize(x,y));?? ??
- ????????pos.apply(contextmenu); ??
- ???? if (tile.__marker__){alert(tile.__marker__) ??
- ????????????contextmenu.style.visibility?=? "visible" ; ??
- ????} else { ??
- ????????contextmenu.style.visibility?=? "hidden" ; ??
- ????} ??
- ??????});??
搞定，It works! 原來google還留了一手的，呵呵。
更多文章、技術(shù)交流、商務(wù)合作、聯(lián)系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號聯(lián)系： 360901061
您的支持是博主寫作最大的動力，如果您喜歡我的文章，感覺我的文章對您有幫助，請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點擊下面給點支持吧，站長非常感激您！手機微信長按不能支付解決辦法：請將微信支付二維碼保存到相冊，切換到微信，然后點擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對您有幫助就好】元
