百度地圖給map添加右鍵菜單(判斷是否為marker)
廢話不多說(shuō)了,直接給大家貼代碼了。
js:
var s;//經(jīng)度 var w;//緯度 map.addEventListener("rightclick",function(e){ if(e.overlay){//判斷右鍵單擊的是否是marker }else{ s = e.point.lng;//經(jīng)度 w = e.point.lat;//維度 RightClick();//右鍵單擊map出現(xiàn)右鍵菜單事件 } }); //右鍵單擊map出現(xiàn)右鍵菜單事件 function RightClick(){ //alert('你點(diǎn)擊的是地圖'); var createMarker = function(map){//右鍵更新站名 if (confirm("要新建站點(diǎn)嗎?")){ if(true){ $(".AllSetMassage").show(); } } }; var markerMenu=new BMap.ContextMenu(); markerMenu.addItem(new BMap.MenuItem('新建站點(diǎn)',createMarker.bind(map))); map.addContextMenu(markerMenu);//給標(biāo)記添加右鍵菜單 }
效果:
右鍵單擊map(非marker)
右鍵單擊marker:
PS:百度地圖給多個(gè)marker添加右鍵菜單(刪除、更新)
js:
$.getJSON("./GetStationPlaceServlet",function(json){ for(var i=;i<json.length;i++){ var obj = eval(json); //獲取經(jīng)緯度 fStationlon = parseFloat(obj[i].Stationlon); fStationlat = parseFloat(obj[i].Stationlat); var pt = new BMap.Point(fStationlon,fStationlat); var myIcon = new BMap.Icon("photo/station.png",new BMap.Size(,),{ anchor: new BMap.Size(, ) }); var marker = new BMap.Marker(pt,{icon:myIcon}); // 創(chuàng)建標(biāo)注 map.addOverlay(marker); //將標(biāo)注添加到地圖中 var strRes = parseFloat(obj[i].StationId); addClickHandler(strRes,marker);//左鍵單擊marker事件 RightClickHandler(strRes,marker);//右鍵單擊marker出現(xiàn)右鍵菜單事件 RightClick();//右鍵地圖出現(xiàn)右鍵菜單事件 } }); //右鍵單擊marker出現(xiàn)右鍵菜單事件 function RightClickHandler(stationId,marker){ var removeMarker = function(e,ee,marker){//右鍵刪除站點(diǎn) var json={ "StationId":stationId, }; if (confirm("要?jiǎng)h除站點(diǎn)"+stationId+"嗎?")){ if(true){ $.getJSON("./DeleteStationServlet",{json:JSON.stringify(json)},function(json){ if(json.result==true){ alert("刪除站點(diǎn)"+stationId+"成功!"); map.removeOverlay(marker); //將地圖中的標(biāo)記刪除 } }); } } }; var updateMarker = function(marker){//右鍵更新站名 if (confirm("要修改站點(diǎn)"+stationId+"的站名嗎?")){ if(true){ $(".AllUpdateMassage").show(); $("#stationId").val(stationId); } } }; var markerMenu=new BMap.ContextMenu(); markerMenu.addItem(new BMap.MenuItem('刪除站點(diǎn)',removeMarker.bind(marker))); markerMenu.addItem(new BMap.MenuItem('修改站名',updateMarker.bind(marker))); marker.addContextMenu(markerMenu);//給標(biāo)記添加右鍵菜單 } //鼠標(biāo)左鍵單擊marker事件 function addClickHandler(stationId,marker){ marker.addEventListener("click",function(e){ var p = marker.getPosition(); //獲取marker的位置 var staId={ "StationId":stationId, }; $.getJSON("./GetStationInfoServlet",{json:JSON.stringify(staId)},function(json){ for(var i=;i<json.length;i++){ var obj = eval(json); stationName = obj[i].stationName; var content = "站點(diǎn)編號(hào):"+stationId+"<br/>"+ "站點(diǎn)名稱:"+stationName; openInfo(content,e); } }); }); } //左鍵單擊marker彈出窗口事件 function openInfo(content,e){ var p = e.target; var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat); var infoWindow = new BMap.InfoWindow(content,opts); // 創(chuàng)建信息窗口對(duì)象 map.openInfoWindow(infoWindow,point); //開啟信息窗口 } //修改站點(diǎn)站名 function update(){ var stationId=$("#stationId").val();//編號(hào) var stationName=$(".AllUpdateMassage_name").val();//名字 var json={ "StationId":stationId, "StationName":stationName }; $.getJSON("./UpdateStationServlet",{json:JSON.stringify(json)},function(json){ if(json.result==true){ alert("站點(diǎn)"+stationId+"站名修改成功!"); $(".AllUpdateMassage").hide(); } else{ alert("失??!"); } }); }
效果圖:
地圖上和數(shù)據(jù)庫(kù)中都已刪除此點(diǎn)信息:
我在實(shí)現(xiàn)這個(gè)時(shí),發(fā)現(xiàn)有人只能在一個(gè)marker上添加右鍵菜單。我這個(gè)不存在這個(gè)問(wèn)題。原理好像是關(guān)于閉包啥的,我也是新手不是很清楚,望懂得人不惜指教。
相關(guān)文章
不刷新網(wǎng)頁(yè)就能鏈接新的js文件方法總結(jié)
在本篇文章里小編給大家整理的是關(guān)于不刷新網(wǎng)頁(yè)就能鏈接新的js文件方法總結(jié),需要的朋友們參考下。2020-03-03Javascript中的window.event.keyCode使用介紹
我們之前發(fā)過(guò)不少關(guān)于event.keyCode相關(guān)的文章,大家都可以參考下。2011-04-04Javascript 調(diào)用 ActionScript 的簡(jiǎn)單方法
在Flex中,ActionScript調(diào)用Javascript是比較簡(jiǎn)單的,說(shuō)白了就是,在html里,怎么調(diào)用Javascript,在ActionScript就怎么調(diào)用就可以了。接下來(lái)通過(guò)本文給大家介紹js 調(diào)用 actionscript方法,感興趣的朋友一起看看吧2016-09-09JS+DIV實(shí)現(xiàn)鼠標(biāo)劃過(guò)切換層效果的方法
這篇文章主要介紹了JS+DIV實(shí)現(xiàn)鼠標(biāo)劃過(guò)切換層效果的方法,涉及javascript鼠標(biāo)事件及頁(yè)面元素操作的相關(guān)技巧,需要的朋友可以參考下2015-05-05關(guān)于js數(shù)組去重的問(wèn)題小結(jié)
在項(xiàng)目開發(fā)過(guò)程中經(jīng)常會(huì)遇到數(shù)組中包含很多重復(fù)的內(nèi)容,即臟數(shù)據(jù)去臟的操作,本文著重講解了數(shù)組去重的幾種方法。需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助2014-01-01微信小程序?qū)崿F(xiàn)頂部選項(xiàng)卡(swiper)
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)頂部選項(xiàng)卡效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-08-08使用JS監(jiān)聽鍵盤按下事件(keydown event)
這篇文章主要介紹了使用JS監(jiān)聽鍵盤按下事件(keydown event),本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-11-11