百度地图添加marker，并增加左键点击，右键菜单，文本窗等功能
2017-12-22 15:07
579 查看
代码内中方法参数与数据库连接，仅供参考！
技术粗浅，不喜勿喷，谢谢
前台用的easyUI框架，本人懒，有需要的朋友把多余的部分删掉再研究
地图底层用的卫星图，引用有错漏，可改成普通的平面图层
---------------------------------------------------------------------------------
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<!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" />
<jsp:include page="../../../inc.jsp"></jsp:include>
<style type="text/css">
body, html {
width: 100%;
height: 100%;
margin: 0;
font-family: "微软雅黑";
}
#allmap {
height: 100%;
width: 100%;
}
#r-result {
width: 100%;
}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=Xpn5CoFXh7Ezel6rNXiI4XjNPOytHFuc"></script>
<title>摄像头管理</title>
</head>
<body>
<input type="button" onclick="add_overlays();" value="添加摄像头" />
<div id="allmap"></div>
<div id="r-result"></div>
<script type="text/javascript">
var cameraGrid = selectAll();
function selectAll() {
$.ajax({
url : '${pageContext.request.contextPath}/camera/cameraAction!getCount.action',
dataType : 'json',
success : function(result) {
if (result != undefined && result!=null) {
for (var i = 0; i < result.length; i++) {
var coordinate = result[i].coordinate;
if(coordinate == null){
continue;
}
var cArr = coordinate.split(",");
var lng = cArr[0];
var lat = cArr[1];
var address = new BMap.Point(lng, lat);
if(result[i].iconsUrl !=null && result[i].iconsUrl != undefined){
var url = '<div style="float:left;width:100px;">'+
'<img src="' + result[i].iconsUrl + '"width="80%" height="80%"/></div>';
}else{
var url = '<div style="float:left;width:80px;">'+
'<img src="http://chache.img-cn-shanghai.aliyuncs.com/files/img/20171203021256_174.png" width="60%" height="80%"/></div>';
}
addMarker(
address,
url,
result[i].cameraType);
RightClickHandler(marker,result[i].cameraId);
//右键菜单
if(result[i].cameraState == 1){
var state = "正常";
}else{
state = "停用";
}
var content = '<div style="margin:0;line-height:20px;padding:2px;">' +
'设备名称：'+ result[i].cameraName +'<br/>设备类型：'+ result[i].cameraType +
'<br/>设备ip：'+ result[i].ip + '<br/>设备状态：'+ state + '</div>';
addClickHandler(marker,content);
//开启左键窗口
}
}
}
});
}
// 百度地图API功能
var map = new BMap.Map("allmap",{mapType: BMAP_HYBRID_MAP}); //设置卫星图为底图
var point = new BMap.Point(119.612005,31.120641);
map.centerAndZoom(point, 18);
map.enableScrollWheelZoom();
var marker = "";
function add_overlays() {
var myIcon = new BMap.Icon(
"http://chache.img-cn-shanghai.aliyuncs.com/files/img/20171201161812_590.png",
new BMap.Size(30, 30));
var marker = new BMap.Marker(point, {
icon : myIcon
});
map.addOverlay(marker);
marker.enableDragging();
RightClickHandler(marker);
//右键菜单
}
// 编写自定义函数,创建标注
function addMarker(point, url, type) {
//自定义标注图标
var myIcon = new BMap.Icon(url, new BMap.Size(30, 30));
marker = new BMap.Marker(point, {icon : myIcon});
if (typeof (type) != undefined) {
marker.eqType = type;
}
map.addOverlay(marker);
marker.enableDragging();
}
//右键菜单事件
function RightClickHandler(marker, pId) {
//删除方法
var removeMarker = function(e, ee, marker) {
if (typeof (pId) != "undefined") {
$.messager.confirm('确认', '确定删除该信息吗？', function(r) {
if (r) {
map.removeOverlay(marker);
$.ajax({
url : '${pageContext.request.contextPath}/camera/cameraAction!delete.action',
data: {
'id' : pId
},
dataType: 'json',
success: function(data) {
if(data.success){
$.messager.alert('提示',data.msg,'info');
} else{
$.messager.alert('错误', data.msg, 'error');
}
},
beforeSend:function(){
$.messager.progress({
text: '数据提交中....'
});
},
complete: function() {
$.messager.progress('close');
}
});
}
});
}
}
//添加标注方法
var updateMarker = function(marker) {
var coordinate = marker.lng + ',' + marker.lat;
var url = '${pageContext.request.contextPath}/page/admin/labelling/addLabelling.jsp?coordinate='
+ coordinate;
if (typeof (pId) != "undefined") {
url = '${pageContext.request.contextPath}/page/admin/labelling/editLabelling.jsp?coordinate='
+ coordinate + '&cameraId=' + pId;
}
var dialog = modalDialog({
title : '编辑标注信息',
iconCls : 'ext-icon-note_add',
url : url,
buttons : [ {
text : '保存',
iconCls : 'ext-icon-save',
handler : function() {
var obj = dialog.find('iframe').get(0).contentWindow.submitForm(dialog,cameraGrid, parent.$);
}
} ]
});
}
if (typeof (pId) != "undefined") {
//保存坐标
var updateCoordinate = function(marker) {
var coordinate = marker.lng + ',' + marker.lat;
$.ajax({
url : '${pageContext.request.contextPath}/camera/cameraAction!updateCoordinate.action',
data : {
'cameraId' : pId,
'coordinate':coordinate
},
dataType : 'json',
success : function(result) {
if (result.success) {
parent.$.messager.progress('close');
$dialog.dialog('destroy');
$pjq.messager.alert('提示', result.msg, 'info');
} else {
parent.$.messager.progress('close');
$pjq.messager.alert('提示', result.msg, 'error');
}
},
beforeSend : function() {
parent.$.messager.progress({
text : '数据提交中....'
});
},
complete : function() {
parent.$.messager.progress('close');
}
});
}
}
//查看
var selectMarker = function(marker) {
if (typeof (pId) != "undefined") {
url = '${pageContext.request.contextPath}/page/admin/labelling/viewLabelling.jsp?coordinate='
+ coordinate + '&cameraId=' + pId;
var coordinate = marker.lng + ',' + marker.lat;
var dialog = parent.modalDialog({
title : '查看标注信息',
iconCls : 'ext-icon-note_add',
url : url,
buttons : [ {
iconCls : 'ext-icon-save',
handler : function() {
dialog.find('iframe').get(0).contentWindow.submitForm(dialog, parent.$);
}
} ]
});
}
}
//创建右键菜单
var markerMenu = new BMap.ContextMenu();
if (typeof (pId) != "undefined") {
markerMenu.addItem(new BMap.MenuItem('查看', selectMarker.bind(marker)));
}
markerMenu.addItem(new BMap.MenuItem('编辑', updateMarker.bind(marker)));
if (typeof (pId) != "undefined") {
markerMenu.addItem(new BMap.MenuItem('保存坐标',updateCoordinate.bind(marker)));
}
markerMenu.addItem(new BMap.MenuItem('删除', removeMarker.bind(marker)));
marker.addContextMenu(markerMenu);
}
//左键菜单事件
function addClickHandler(marker,content) {
var opts = {
title : "太极洞",
// 信息窗口标题
width : 250,
// 信息窗口宽度
height: 150,
// 信息窗口高度
enableMessage: true,
//设置允许信息窗发送短息
}
var coordinate = marker.lng + ',' + marker.lat;
var infoWindow = new BMap.InfoWindow(content, opts); // 创建信息窗口对象
marker.addEventListener("click",function(e){
openInfo(infoWindow,e); //开启信息窗口
marker.disableDragging();
})
infoWindow.addEventListener("close",function(e){
marker.enableDragging();
})
};
function openInfo(infoWindow,e){
var p = e.target;
var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
map.openInfoWindow(infoWindow,point);
infoWindow.enableCloseOnClick();
}
</script>
</body>
</html>
技术粗浅，不喜勿喷，谢谢
前台用的easyUI框架，本人懒，有需要的朋友把多余的部分删掉再研究
地图底层用的卫星图，引用有错漏，可改成普通的平面图层
---------------------------------------------------------------------------------
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<!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" />
<jsp:include page="../../../inc.jsp"></jsp:include>
<style type="text/css">
body, html {
width: 100%;
height: 100%;
margin: 0;
font-family: "微软雅黑";
}
#allmap {
height: 100%;
width: 100%;
}
#r-result {
width: 100%;
}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=Xpn5CoFXh7Ezel6rNXiI4XjNPOytHFuc"></script>
<title>摄像头管理</title>
</head>
<body>
<input type="button" onclick="add_overlays();" value="添加摄像头" />
<div id="allmap"></div>
<div id="r-result"></div>
<script type="text/javascript">
var cameraGrid = selectAll();
function selectAll() {
$.ajax({
url : '${pageContext.request.contextPath}/camera/cameraAction!getCount.action',
dataType : 'json',
success : function(result) {
if (result != undefined && result!=null) {
for (var i = 0; i < result.length; i++) {
var coordinate = result[i].coordinate;
if(coordinate == null){
continue;
}
var cArr = coordinate.split(",");
var lng = cArr[0];
var lat = cArr[1];
var address = new BMap.Point(lng, lat);
if(result[i].iconsUrl !=null && result[i].iconsUrl != undefined){
var url = '<div style="float:left;width:100px;">'+
'<img src="' + result[i].iconsUrl + '"width="80%" height="80%"/></div>';
}else{
var url = '<div style="float:left;width:80px;">'+
'<img src="http://chache.img-cn-shanghai.aliyuncs.com/files/img/20171203021256_174.png" width="60%" height="80%"/></div>';
}
addMarker(
address,
url,
result[i].cameraType);
RightClickHandler(marker,result[i].cameraId);
//右键菜单
if(result[i].cameraState == 1){
var state = "正常";
}else{
state = "停用";
}
var content = '<div style="margin:0;line-height:20px;padding:2px;">' +
'设备名称：'+ result[i].cameraName +'<br/>设备类型：'+ result[i].cameraType +
'<br/>设备ip：'+ result[i].ip + '<br/>设备状态：'+ state + '</div>';
addClickHandler(marker,content);
//开启左键窗口
}
}
}
});
}
// 百度地图API功能
var map = new BMap.Map("allmap",{mapType: BMAP_HYBRID_MAP}); //设置卫星图为底图
var point = new BMap.Point(119.612005,31.120641);
map.centerAndZoom(point, 18);
map.enableScrollWheelZoom();
var marker = "";
function add_overlays() {
var myIcon = new BMap.Icon(
"http://chache.img-cn-shanghai.aliyuncs.com/files/img/20171201161812_590.png",
new BMap.Size(30, 30));
var marker = new BMap.Marker(point, {
icon : myIcon
});
map.addOverlay(marker);
marker.enableDragging();
RightClickHandler(marker);
//右键菜单
}
// 编写自定义函数,创建标注
function addMarker(point, url, type) {
//自定义标注图标
var myIcon = new BMap.Icon(url, new BMap.Size(30, 30));
marker = new BMap.Marker(point, {icon : myIcon});
if (typeof (type) != undefined) {
marker.eqType = type;
}
map.addOverlay(marker);
marker.enableDragging();
}
//右键菜单事件
function RightClickHandler(marker, pId) {
//删除方法
var removeMarker = function(e, ee, marker) {
if (typeof (pId) != "undefined") {
$.messager.confirm('确认', '确定删除该信息吗？', function(r) {
if (r) {
map.removeOverlay(marker);
$.ajax({
url : '${pageContext.request.contextPath}/camera/cameraAction!delete.action',
data: {
'id' : pId
},
dataType: 'json',
success: function(data) {
if(data.success){
$.messager.alert('提示',data.msg,'info');
} else{
$.messager.alert('错误', data.msg, 'error');
}
},
beforeSend:function(){
$.messager.progress({
text: '数据提交中....'
});
},
complete: function() {
$.messager.progress('close');
}
});
}
});
}
}
//添加标注方法
var updateMarker = function(marker) {
var coordinate = marker.lng + ',' + marker.lat;
var url = '${pageContext.request.contextPath}/page/admin/labelling/addLabelling.jsp?coordinate='
+ coordinate;
if (typeof (pId) != "undefined") {
url = '${pageContext.request.contextPath}/page/admin/labelling/editLabelling.jsp?coordinate='
+ coordinate + '&cameraId=' + pId;
}
var dialog = modalDialog({
title : '编辑标注信息',
iconCls : 'ext-icon-note_add',
url : url,
buttons : [ {
text : '保存',
iconCls : 'ext-icon-save',
handler : function() {
var obj = dialog.find('iframe').get(0).contentWindow.submitForm(dialog,cameraGrid, parent.$);
}
} ]
});
}
if (typeof (pId) != "undefined") {
//保存坐标
var updateCoordinate = function(marker) {
var coordinate = marker.lng + ',' + marker.lat;
$.ajax({
url : '${pageContext.request.contextPath}/camera/cameraAction!updateCoordinate.action',
data : {
'cameraId' : pId,
'coordinate':coordinate
},
dataType : 'json',
success : function(result) {
if (result.success) {
parent.$.messager.progress('close');
$dialog.dialog('destroy');
$pjq.messager.alert('提示', result.msg, 'info');
} else {
parent.$.messager.progress('close');
$pjq.messager.alert('提示', result.msg, 'error');
}
},
beforeSend : function() {
parent.$.messager.progress({
text : '数据提交中....'
});
},
complete : function() {
parent.$.messager.progress('close');
}
});
}
}
//查看
var selectMarker = function(marker) {
if (typeof (pId) != "undefined") {
url = '${pageContext.request.contextPath}/page/admin/labelling/viewLabelling.jsp?coordinate='
+ coordinate + '&cameraId=' + pId;
var coordinate = marker.lng + ',' + marker.lat;
var dialog = parent.modalDialog({
title : '查看标注信息',
iconCls : 'ext-icon-note_add',
url : url,
buttons : [ {
iconCls : 'ext-icon-save',
handler : function() {
dialog.find('iframe').get(0).contentWindow.submitForm(dialog, parent.$);
}
} ]
});
}
}
//创建右键菜单
var markerMenu = new BMap.ContextMenu();
if (typeof (pId) != "undefined") {
markerMenu.addItem(new BMap.MenuItem('查看', selectMarker.bind(marker)));
}
markerMenu.addItem(new BMap.MenuItem('编辑', updateMarker.bind(marker)));
if (typeof (pId) != "undefined") {
markerMenu.addItem(new BMap.MenuItem('保存坐标',updateCoordinate.bind(marker)));
}
markerMenu.addItem(new BMap.MenuItem('删除', removeMarker.bind(marker)));
marker.addContextMenu(markerMenu);
}
//左键菜单事件
function addClickHandler(marker,content) {
var opts = {
title : "太极洞",
// 信息窗口标题
width : 250,
// 信息窗口宽度
height: 150,
// 信息窗口高度
enableMessage: true,
//设置允许信息窗发送短息
}
var coordinate = marker.lng + ',' + marker.lat;
var infoWindow = new BMap.InfoWindow(content, opts); // 创建信息窗口对象
marker.addEventListener("click",function(e){
openInfo(infoWindow,e); //开启信息窗口
marker.disableDragging();
})
infoWindow.addEventListener("close",function(e){
marker.enableDragging();
})
};
function openInfo(infoWindow,e){
var p = e.target;
var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
map.openInfoWindow(infoWindow,point);
infoWindow.enableCloseOnClick();
}
</script>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 百度地图给map添加右键菜单（判断是否为marker）
- 百度地图笔记_覆盖物（标注marker，折线polyline，多边形polygon）的点击弹窗和右键菜单
- 百度地图给多个marker添加右键菜单（删除、更新）
- FckEditor添加右键菜单；增加编辑区右键图片删除功能（asp.net ）
- 百度地图给map添加右键菜单（判断是否为marker）
- 『实践』百度地图给多个marker添加右键菜单（删除、更新）
- 百度地图给map添加右键菜单（判断是否为marker）
- 『实践』百度地图给map添加右键菜单（判断是否为marker）
- 百度地图给多个marker添加右键菜单（删除、更新）
- 百度地图给多个marker添加右键菜单（删除、更新）
- 百度地图,marker添加右键菜单
- FckEditor添加右键菜单；增加编辑区右键图片删除功能（asp.net ）（一）
- CMyRichEditCtrl 与 CMyRichEditView 增加右键点击弹出菜单功能
- FckEditor添加右键菜单；增加编辑区右键图片删除功能（asp.net ）（二）
- 百度地图给map添加右键菜单（判断是否为marker）
- 百度地图笔记_覆盖物（标注marker，折线polyline，多边形polygon）的点击弹窗和右键菜单
- 给ECharts添加右键点击事件，实现右键功能菜单
- 为右键菜单增加dos命令行功能
- ListBox添加右键菜单并选择该项功能的实现
- Redrain 通用菜单控件使用方法和说明（增加动态添加功能、附源码和demo）