百度地图API中使用ajax实现点击地图生成标注并保存到数据库

来源：互联网发布：多功能双肩背包知乎编辑：程序博客网时间：2024/05/21 07:51

在最近的项目中要使用到百度地图的api对于地图处理，要实现的功能是在地图上每一次点击都会生成一个标注，并把标注位置的坐标保存到数据库中。搜了很多地方都没有找到，就打算自己写写，没想到最后发现也不是很难。话不多说，直接上代码。

首先是地图处理的map.html源码

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="viewport" content="initial-scale=1.0, user-scalable=no" /><script type="text/javascript" src="js/jquery.min.js"></script><style type="text/css">body, html, #allmap {    width: 100%;    height: 100%;    overflow: hidden;    margin: 0;    font-family: "微软雅黑";}</style><script type="text/javascript"    src="http://api.map.baidu.com/api?v=2.0&ak=IEWfDgFSQV416RrFOGqmje63CHkvQsY1"></script><title>地图展示</title></head><body>    <div id="allmap"></div></body><script type="text/javascript">    // 百度地图API功能    var map = new BMap.Map("allmap",{minZoom:4,maxZoom:9});    // 创建Map实例,并设置地图最大最小级别    map.centerAndZoom(new BMap.Point(118.793924, 32.047209), 9);  // 初始化地图,设置中心点坐标和地图级别    map.addControl(new BMap.MapTypeControl({mapTypes: [BMAP_NORMAL_MAP,BMAP_SATELLITE_MAP,BMAP_HYBRID_MAP ]}));   //添加地图类型控件    map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放    //删除标注点    var removeMarker = function(e,ee,marker){    map.removeOverlay(marker);    }    //左键单击地图响应事件    map.addEventListener("click", function(n){            //1.点击动态生成标注点            var point=new BMap.Point(n.point.lng,n.point.lat);            var marker =new BMap.Marker(point);            map.addOverlay(marker);            //2.为标注点生成右击菜单            //创建菜单            var markerMenu =new BMap.ContextMenu();            markerMenu.addItem(new BMap.MenuItem('删除',removeMarker.bind(marker)));            marker.addContextMenu(markerMenu);            //3.调用后端接口存储该标注信息                $("#allmap").click(function(){                    $.ajax({                        type:"post",                        url:"marker/insert.action",                        async:true,                        dataType:"text",                        data:{"pointX":n.point.lng,"pointY":n.point.lat},                        success:function(){                            alert("success")                        },                        error:function(){                            alert("fail");                        }                    })                })            });</script></html>

再次，后端的处理就是一个基本的插入数据库操作，我这里使用的是springMVC

@Controller@RequestMapping("/marker")public class MarkerHandleControl {    @Resource(name="markerHandleServiceImp")    private MarkerHandleServiceImp markerHandleService;    @ResponseBody    @RequestMapping("/insert")    public Object insert(float pointX,float pointY,HttpServletRequest request) {        Marker marker=new Marker();        marker.setPointX(pointX);        marker.setPointY(pointY);        marker.setCreateTime(System.currentTimeMillis());        User user=new UserLoginServiceImp().getUserByUsername(request.getSession().getAttribute("username").toString());        marker.setUser(user);        JSONObject jsonObject=new JSONObject();        if(markerHandleService.insertMarker(marker)) {            //返回{result:1}            jsonObject.put("result", 1);        }else {            //返回{result:0}            jsonObject.put("result", 0);        }        return jsonObject;    }}public class MarkerHandleServiceImp implements MarkerHandleService{    @Override    public boolean insertMarker(Marker marker) {        // TODO Auto-generated method stub        SqlSession sqlSession=MyBatisDAOUtil.getSqlSessionFactory()                .openSession();        MarkerHandleMapper mapper=sqlSession.getMapper(MarkerHandleMapper.class);        if(mapper.insertMarkerInfo(marker)!=0) {        return true;    }        return false;    }}

数据库使用的是mabatis，至于怎么配置我就不多讲了。

很多人可能会问我，为什么你每次都不添完整的源码过来？我想我应该提供给你的是不懂的技术，而你需要在代码中有自己的思想和灵魂。程序员不是打字员，也更不是只会复制粘贴直接使用。

阅读全文

0 0