<!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='保存' 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>
