这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这篇文章主要介绍了百度地图给 map 添加右键菜单(判断是否为 marker) 的相关资料, 需要的朋友可以参考下
废话不多说了,直接给大家贴代码了。
js:
- var s; //经度
- var w; //纬度
- map.addEventListener("rightclick",
- function(e) {
- if (e.overlay) { //判断右键单击的是否是marker
- } else {
- s = e.point.lng; //经度
- w = e.point.lat; //维度
- RightClick(); //右键单击map出现右键菜单事件
- }
- });
- //右键单击map出现右键菜单事件
- function RightClick() {
- //alert('你点击的是地图');
- var createMarker = function(map) { //右键更新站名
- if (confirm("要新建站点吗?")) {
- if (true) {
- $(".AllSetMassage").show();
- }
- }
- };
- var markerMenu = new BMap.ContextMenu();
- markerMenu.addItem(new BMap.MenuItem('新建站点', createMarker.bind(map)));
- map.addContextMenu(markerMenu); //给标记添加右键菜单
- }
效果:
右键单击 map(非 marker)
右键单击 marker:
PS:百度地图给多个 marker 添加右键菜单(删除、更新)
js:
- $.getJSON("./GetStationPlaceServlet",
- function(json) {
- for (var i = ; i < json.length; i++) {
- var obj = eval(json);
- //获取经纬度
- 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
- }); // 创建标注
- map.addOverlay(marker); //将标注添加到地图中
- var strRes = parseFloat(obj[i].StationId);
- addClickHandler(strRes, marker); //左键单击marker事件
- RightClickHandler(strRes, marker); //右键单击marker出现右键菜单事件
- RightClick(); //右键地图出现右键菜单事件
- }
- });
- //右键单击marker出现右键菜单事件
- function RightClickHandler(stationId, marker) {
- var removeMarker = function(e, ee, marker) { //右键删除站点
- var json = {
- "StationId": stationId,
- };
- if (confirm("要删除站点" + stationId + "吗?")) {
- if (true) {
- $.getJSON("./DeleteStationServlet", {
- json: JSON.stringify(json)
- },
- function(json) {
- if (json.result == true) {
- alert("删除站点" + stationId + "成功!");
- map.removeOverlay(marker); //将地图中的标记删除
- }
- });
- }
- }
- };
- var updateMarker = function(marker) { //右键更新站名
- if (confirm("要修改站点" + stationId + "的站名吗?")) {
- if (true) {
- $(".AllUpdateMassage").show();
- $("#stationId").val(stationId);
- }
- }
- };
- var markerMenu = new BMap.ContextMenu();
- markerMenu.addItem(new BMap.MenuItem('删除站点', removeMarker.bind(marker)));
- markerMenu.addItem(new BMap.MenuItem('修改站名', updateMarker.bind(marker)));
- marker.addContextMenu(markerMenu); //给标记添加右键菜单
- }
- //鼠标左键单击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 = "站点编号:" + stationId + "<br/>" + "站点名称:" + 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); // 创建信息窗口对象
- map.openInfoWindow(infoWindow, point); //开启信息窗口
- }
- //修改站点站名
- function update() {
- var stationId = $("#stationId").val(); //编号
- var stationName = $(".AllUpdateMassage_name").val(); //名字
- var json = {
- "StationId": stationId,
- "StationName": stationName
- };
- $.getJSON("./UpdateStationServlet", {
- json: JSON.stringify(json)
- },
- function(json) {
- if (json.result == true) {
- alert("站点" + stationId + "站名修改成功!");
- $(".AllUpdateMassage").hide();
- } else {
- alert("失败!");
- }
- });
- }
效果图:
地图上和数据库中都已删除此点信息:
我在实现这个时,发现有人只能在一个 marker 上添加右键菜单。我这个不存在这个问题。原理好像是关于闭包啥的,我也是新手不是很清楚,望懂得人不惜指教。
来源: http://www.phperz.com/article/17/0716/266835.html