使用百度地图API实现地图生成标记以及标注

首先你需要引入一段javaScript

<script type="text/javascript" src="http://api./api? v=2.0&ak=你的密钥"></script>

密钥申请很简单，按着步骤来，我是测试用的，写白名单的时候只需要写个 * 就行了，百度一个密钥也可以。

我的需求是只能在地图上用一个标记，所以使用了一个time变量来计数，当用户点击在地图上，弹出询问框是否在此地标记，询问框是通过layer实现的。若用户点击确定，则通过ajax发送请求，将标记的经纬度以及传到这个网页的一些数据发送给后台进行持久化，前台通过结果选择是否标记。

这是地图的显示：

// 百度地图API功能var map = new BMap.Map("allmap"); // 创建Map实例map.centerAndZoom(new BMap.Point(****,**** ), 17); // 初始化地图,设置中心点坐标和地图级别,****代表经纬度，可以通过http://api./lbsapi/creatmap/ 来查看你需要的城市的经纬度//添加地图类型控件map.addControl(new BMap.MapTypeControl({mapTypes : [ BMAP_NORMAL_MAP, BMAP_HYBRID_MAP ]}));map.setCurrentCity("你要显示的城市"); // 设置地图显示的城市此项是必须设置的map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放 //点击地图并在此添加标记map.addEventListener("click", function(e) {//鼠标单击地图触发if (time >= 1) {return;} else {popLayer(e);}});

以下为显示效果：

这是popLayer方法，即鼠标单击地图触发：

这是创建标记、标注的方法

最后贴上完整jsp代码:

<%@ page language="java" contentType="text/html; charset=utf-8"pageEncoding="utf-8"%><html><head><meta name="viewport"content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"><script type="text/javascript"src="http://api./api?v=2.0&ak=你的密钥"></script><script type="text/javascript"src="<c:url value='/scripts/boostrap/jquery.min.js'/>"></script><script type="text/javascript"src="<c:url value='/scripts/layer/layer.js'/>"></script><link rel="stylesheet" type="text/css" media="all"href="/styles/layer/layer.css" /><title>标注事项地点</title><style type="text/css">body, html, #allmap {width: 100%;height: 100%;overflow: hidden;margin: 0;font-family: "微软雅黑";}</style></head><body><div class="container"><div id="allmap"></div><form class="form-horizontal" role="form" action="bpm/bmfw/addMaker"id="mapMsgForm" method="post"><div class="form-group"><div class="col-sm-10"><input type="hidden" name="bjh" value="${bjh }"></div></div><div class="form-group"><div class="col-sm-10"><input type="hidden" name="sqr" value="${ sqr}"></div></div><div class="form-group"><div class="col-sm-10"><input type="hidden" name="sx" value="${sx }"></div></div><div class="form-group"><div class="col-sm-10"><input type="hidden" name="pointX" value=""></div></div><div class="form-group"><div class="col-sm-10"><input type="hidden" name="pointY" value=""></div></div><div class="form-group"><div class="col-sm-offset-2 col-sm-10"><button type="submit" class="btn btn-default"></button></div></div></form></div></body></html><script type="text/javascript">var marker;var time = 0;var bjh = $("input[name='bjh']").val();var sx = $("input[name='sx']").val();var sqr = $("input[name='sqr']").val();var pointX;var pointY;// 百度地图API功能var map = new BMap.Map("allmap"); // 创建Map实例map.centerAndZoom(new BMap.Point(119.847604, 31.274829), 17); // 初始化地图,设置中心点坐标和地图级别//添加地图类型控件map.addControl(new BMap.MapTypeControl({mapTypes : [ BMAP_NORMAL_MAP, BMAP_HYBRID_MAP ]}));map.setCurrentCity("宜兴"); // 设置地图显示的城市此项是必须设置的map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放 //点击地图并在此添加标记map.addEventListener("click", function(e) {if (time >= 1) {return;} else {popLayer(e);}});var removeMarker = function(e, ee, marker) {//删除标记$.ajax({type : 'POST',async : true,url : '/bpm/bmfw/deleteMaker',data : {"bjh":bjh},success : function(result){console.log("删除成功");//成功的话向地图上创建标记和标注map.removeOverlay(marker);time = time - 1;},error : function(){console.log("删除标注失败！");}});}var commitMapMsg = function(e, ee, marker) {//提交地图信息$("#mapMsgForm").submit();}function popLayer(e) {//将经纬度存入form中 $("input[name='pointX']").val(e.point.lng);$("input[name='pointY']").val(e.point.lat);//取出经纬度pointX = $("input[name='pointX']").val();pointY = $("input[name='pointY']").val();layer.open({title : '确认在此地标注？',content : '<p>许可证号：' + bjh + '</p><p>申请人/单位：' + sqr+ '</p><p>许可事项：' + sx + '</p>',yes : function(index, layero) {//点击确认,即提交信息$.ajax({type : 'POST',async : true,url : '/bpm/bmfw/addMaker',data : {"bjh":bjh,"sx":sx,"sqr":sqr,"pointX":pointX,"pointY":pointY},success : function(result){console.log("成功");//成功的话向地图上创建标记和标注createMaker(e);},error : function(){console.log("创建标注失败！");}});layer.close(index); }});}function createMaker(e){marker = new BMap.Marker(e.point);map.addOverlay(marker);map.panTo(e.point);/* marker.setAnimation(BMAP_ANIMATION_BOUNCE);//跳动的标记 *///创建右键菜单var markerMenu = new BMap.ContextMenu();markerMenu.addItem(new BMap.MenuItem('删除', removeMarker.bind(marker)));marker.addContextMenu(markerMenu);/* markerMenu.addItem(new BMap.MenuItem('提交', commitMapMsg.bind(marker)));marker.addContextMenu(markerMenu); *///标注var text = "<p>许可证号：" + bjh + "</p><p>申请人/单位：" + sqr+ "</p><p>许可事项：" + sx + "</p>";var label = new BMap.Label(text, {offset : new BMap.Size(-85, -120)});//设置label(标注的样式)label.setStyle({color : "black",fontSize : "12px",height : "110px",//lineHeight : "20px",fontFamily : "微软雅黑",maxWidth : "none",border : "none"});marker.setLabel(label);time = time + 1;}</script>

使用百度地图API实现地图生成 标记以及标注

使用百度地图API实现地图生成标记以及标注