Baidu Map to add the right button menu (to determine whether it is marker) _javascript tips

Source: Internet
Author: User
Tags eval

No more nonsense to say, directly to everyone paste code.

Js:

var s;//longitude
var w;//latitude
map.addeventlistener ("RightClick", function (e) {
if (e.overlay) {// Determine if the right mouse click is marker
}else{
s = e.point.lng;//longitude
w = e.point.lat;//dimension
rightclick ();//Right-click Map appears with right-click menu Event
}
});
Right-click Map appears right-click menu Event
function RightClick () {
//alert (' You clicked on Map ');
var createmarker = function (map) {//Right-click Update Station name
if (confirm) ("Do you want to create a new site?") ")) {
if (true) {
$ (). Allsetmassage "). Show (),}} 
;
var markermenu=new bmap.contextmenu ();
Markermenu.additem New Bmap.menuitem (' New site ', Createmarker.bind (map));
Map.addcontextmenu (Markermenu);//Add right-click menu to tag

Effect:

Right-click Map (non marker)


Right-click Marker:

PS: Baidu map to multiple marker add right menu (delete, update)

Js:

$.getjson ("./getstationplaceservlet", function (JSON) {for (Var i=;i<json.length;i++) {var obj = eval (JSON);//Get Latitude and longitude 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}); Create callout Map.addoverlay (marker); Add a callout to the map var strres = parsefloat (obj[i).
Stationid); Addclickhandler (Strres,marker);//Left click Marker event Rightclickhandler (strres,marker)//Right-click Marker appears right-click menu Event RightClick ()
//Right key map appears right-click menu event}});
Right-click Marker appears right-click menu event Function Rightclickhandler (stationid,marker) {var removemarker = function (e,ee,marker) {//right mouse delete site
var json={"Stationid": Stationid,}; if (Confirm to delete site "+stationid+"?) {if (true) {$.getjson ("./deletestationservlet", {json:JSON.stringify (JSON)},function (JSON) {if (json.result== true) {alert ("delete site" +stationid+ success!)
"); Map.removeoverlay (marker); Delete the tags in the map} 
});
}
} 
}; var updatemarker = function (marker) {//Right-click Update Station name if (confirm) to modify site "+stationid+" station name? ")) {if (true) {$ ().
Allupdatemassage "). Show ();
$ ("#stationId"). Val (Stationid);
}
} 
};
var markermenu=new bmap.contextmenu ();
Markermenu.additem (New Bmap.menuitem (' Delete site ', Removemarker.bind (marker));
Markermenu.additem (New Bmap.menuitem (' Modify station name ', Updatemarker.bind (marker));
Marker.addcontextmenu (Markermenu);//Add right-click menu}//left mouse button Click Marker event function Addclickhandler (stationid,marker) { Marker.addeventlistener ("click", Function (e) {var p = marker.getposition ();//Get marker location 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 = "Site number: +stationid+" <br/> "+" Site name: "+stationn
Ame
OpenInfo (content,e);
}
});
}); //Left click Marker Popup event function OpenInfo (content,e) {var p = e.target; var point = new Bmap.point (P.getposition (). LNG, P.get PositIon (). lat); var Infowindow = new Bmap.infowindow (content,opts); Create an Information Window object Map.openinfowindow (infowindow,point); Open the Info Window}//Modify the Site name Function update () {var stationid=$ ("#stationId"). Val ()//number Var stationname=$ (". 
Allupdatemassage_name "). Val ();//name var json={" Stationid ": Stationid," StationName ": StationName}; $.getjson ("./updatestationservlet", {json:JSON.stringify (JSON)},function (JSON) {if (json.result==true) {alert ("site" +stationid+ "Station name modification success!"
"); $(".
Allupdatemassage "). Hide (); } else{alert ("Failed!") ");
}
});
}

Effect Chart:


This point information has been deleted on the map and in the database:

When I implemented this, I found that someone could only add a right-click menu to a marker. I don't have this problem. The principle seems to be about closure of what, I am also novice is not very clear, hope to understand people do not hesitate to advise.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.