ホームページ ウェブフロントエンド jsチュートリアル Baidu Map は地図に右クリック メニューを追加します (マーカーかどうかを判断)_JavaScript スキル

Baidu Map は地図に右クリック メニューを追加します (マーカーかどうかを判断)_JavaScript スキル

May 16, 2016 pm 03:12 PM
右クリックメニュー

これ以上ナンセンスではありません。コードを投稿させてください。

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);//给标记添加右键菜单
} 
ログイン後にコピー

効果:

地図 (マーカー以外) を右クリックします


マーカーを右クリックします:

追記: Baidu Maps は複数のマーカーの右クリック メニュー (削除、更新) を追加しました

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("失败!");
}
});
}
ログイン後にコピー

レンダリング:


この情報は地図とデータベースから削除されました:

これを実装していたとき、誰かがマーカーに右クリック メニューしか追加できないことがわかりました。この問題はありません。原理はクロージャか何かに関するもののようですが、私は初心者なのでよくわかりません。理解している人が私にアドバイスをくれることを願っています。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットな記事タグ

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

Windows 10 を右クリックしたときに圧縮パッケージのオプションがない場合はどうすればよいですか? Windows 10 を右クリックしたときに圧縮パッケージのオプションがない場合はどうすればよいですか? Jul 13, 2023 pm 11:05 PM

Windows 10 を右クリックしたときに圧縮パッケージのオプションがない場合はどうすればよいですか?

Win11の右クリックメニューの反応が遅い場合の解決方法は? Win11でマウスの右クリックのポップアップメニューが遅い場合の解決策 Win11の右クリックメニューの反応が遅い場合の解決方法は? Win11でマウスの右クリックのポップアップメニューが遅い場合の解決策 Jan 31, 2024 pm 10:06 PM

Win11の右クリックメニューの反応が遅い場合の解決方法は? Win11でマウスの右クリックのポップアップメニューが遅い場合の解決策

右クリックして新しい単語を作成すると消えます 右クリックして新しい単語を作成すると消えます Dec 25, 2023 am 10:43 AM

右クリックして新しい単語を作成すると消えます

Win11の右クリックメニューに描画プログラムを追加するにはどうすればよいですか? Win11の右クリックメニューに描画プログラムを追加する方法 Win11の右クリックメニューに描画プログラムを追加するにはどうすればよいですか? Win11の右クリックメニューに描画プログラムを追加する方法 Feb 11, 2024 pm 09:03 PM

Win11の右クリックメニューに描画プログラムを追加するにはどうすればよいですか? Win11の右クリックメニューに描画プログラムを追加する方法

Windows 10で右クリックメニュー管理が開けない場合の対処方法 Windows 10で右クリックメニュー管理が開けない場合の対処方法 Jan 04, 2024 pm 07:07 PM

Windows 10で右クリックメニュー管理が開けない場合の対処方法

win11ファイルの右クリックメニューが表示されなくなる問題の解決方法 win11ファイルの右クリックメニューが表示されなくなる問題の解決方法 Jul 02, 2023 pm 11:13 PM

win11ファイルの右クリックメニューが表示されなくなる問題の解決方法

win11の右クリックメニューが完全に表示できない場合の対処法_右クリックメニューを完全展開モードに戻す裏技 win11の右クリックメニューが完全に表示できない場合の対処法_右クリックメニューを完全展開モードに戻す裏技 Mar 20, 2024 pm 02:22 PM

win11の右クリックメニューが完全に表示できない場合の対処法_右クリックメニューを完全展開モードに戻す裏技

Win11 マウス右クリックメニュー設定チュートリアル Win11 マウス右クリックメニュー設定チュートリアル Dec 23, 2023 am 11:05 AM

Win11 マウス右クリックメニュー設定チュートリアル

See all articles