右鍵選單
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <style type="text/css"> body, html, #allmap { width: 100%; height: 100%; overflow: hidden; margin: 0; font-family: "微軟雅黑"; font-size: 14px; } </style> <script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script> <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=31hnqKEhOUOWFXXxvWYXiM1v"></script> <!--加載滑鼠繪制工具--> <script type="text/javascript" src="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.js"></script> <link rel="stylesheet" href="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.css" /> <title></title> </head> <body> <div id="allmap"> </div> </body> </html>
<script type="text/javascript">
// 百度地圖初始化
var map = new BMap.Map("allmap");
map.centerAndZoom("上海市", 12);
map.enableScrollWheelZoom();
map.enableContinuousZoom();
var bmap = {
drawingManager: '',
styleOptions: {
strokeColor: "red", //邊線顏色，
fillColor: "red", //填充顏色，當引數為空時，圓形將沒有填充效果，
strokeWeight: 3, //邊線的寬度，以像素為單位，
strokeOpacity: 0.8, //邊線透明度，取值范圍0 - 1，
fillOpacity: 0.3, //填充的透明度，取值范圍0 - 1，
strokeStyle: 'solid' //邊線的樣式，solid或dashed，
},
/*------實體化-----*/
init: function () {
var styleOptions = this.styleOptions;
map.enableScrollWheelZoom();
//實體化滑鼠繪制工具
this.drawingManager = new BMapLib.DrawingManager(map, {
isOpen: false, //是否開啟繪制模式
enableDrawingTool: true, //是否顯示工具列
drawingToolOptions: {
anchor: BMAP_ANCHOR_TOP_RIGHT, //位置
offset: new BMap.Size(5, 5), //偏離值
scale: 0.8, //工具列縮放比例
drawingModes: [
//工具列上可以選擇出現的繪制模式
BMAP_DRAWING_MARKER,
BMAP_DRAWING_POLYGON,
BMAP_DRAWING_POLYLINE
//BMAP_DRAWING_RECTANGLE
//BMAP_DRAWING_CIRCLE
]
},
polylineOptions: styleOptions, //線的樣式
polygonOptions: styleOptions, //多邊形的樣式
});
//添加滑鼠繪制工具監聽事件，用于獲取繪制結果
this.drawingManager.addEventListener('overlaycomplete', bmap.overlaycomplete);
},
overlaycomplete: function (e) {
switch (e.drawingMode) {
case "marker":
{
var marker = e.overlay;
/*-----------------標注右鍵洗掉-------------------------*/
var markerMenu = new BMap.ContextMenu();
markerMenu.addItem(new BMap.MenuItem('洗掉標注 ', function () {
map.removeOverlay(marker);
}))
marker.addContextMenu(markerMenu);
/*-----------------標注點擊彈窗-------------------------*/
marker.addEventListener("click", function (e) {
var sContent =
"<form method='post' action=''>" +
"<table>" +
"<tr>" +
"<td><b>名稱：</b>" +
"<input type='text' name='Name' style='margin-top:10px;width:200px'/>" +
"</td>" +
"</tr>" +
"<tr>" +
"<td><b>坐標：</b>" +
"<input type='text' name='lng' value='" + e.point.lng + "' style='width:80px;'/>" +
"<span>-</span>" +
"<input type='text' name='lat' value='" + e.point.lat + "' style='width:80px;'/>" +
"</td>" +
"</tr>" +
"<tr >" +
"<td><b>備注：</b>" +
"<textarea rows=6 name='Remark' style='width:198px;vertical-align:top;'></textarea>" +
"</td>" +
"</tr>" +
"<tr>" +
"<td style='text-align:right;'>" +
"<input type='button' value='https://www.cnblogs.com/nelsonlei/p/保存' style='width: 40px;line-height: 40px;'/>" +
"</td>" +
"</tr>" +
"</talbe>" +
"</form>";
var opts = {
enableMessage: false
};
var infoWindow = new BMap.InfoWindow(sContent, opts);
this.openInfoWindow(infoWindow);
});
}
break;
case "polyline":
{
var polyline = e.overlay;
/*-----------------折線右鍵洗掉-------------------------*/
var polylineMenu = new BMap.ContextMenu();
polylineMenu.addItem(new BMap.MenuItem('洗掉折線', function () {
map.removeOverlay(polyline);
}));
polyline.addContextMenu(polylineMenu);
}
break;
case "polygon":
{
var polygon = e.overlay;
/*-----------------多邊形右鍵洗掉-------------------------*/
var polygonMenu = new BMap.ContextMenu();
polygonMenu.addItem(new BMap.MenuItem('洗掉多邊形', function () {
map.removeOverlay(polygon);
}));
polygon.addContextMenu(polygonMenu);
}
break;
}
}
}
bmap.init();
</script>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/95330.html
標籤：JavaScript
下一篇：js 百度地圖 弧線.note