Java---(SpringBlade框架)后台从数据库读取所有点的经度和纬度,传输到前端显示在地图上

1、MySQL查询语句:

  1. pointsArr

  2. ===

  3. select l.gisbaidu

  4. from smt_lamp l


2、控制层代码:

  1. @RequestMapping(KEY_MAIN)

  2. public String index(ModelMap mm, Model model) {

  3. String sql = Md.getSql("location.pointsArr");//sql语句

  4. @SuppressWarnings("rawtypes")

  5. List<Map> list = Db.selectList(sql);

  6. mm.put("points", JsonKit.toJson(list));//java的数据类型传到js中,需要转化为JSON格式

  7. mm.put("code", CODE);

  8. return BASE_PATH + "location.html";

  9. }


3、前端:

  1. <div id="allmap" style="width:100%; height:500px;"></div>

  2. <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=U5IzhV77l7nd7qymfsXVK03sICNeTir2"></script>

  3. <script type="text/javascript">

  4. $(function(){

  5. var map = new BMap.Map("allmap");//初始化地图

  6. //var point = new BMap.Point(120.049132,31.785857);//创建点

  7. map.centerAndZoom("常州", 15);

  8. map.enableScrollWheelZoom(true);// 开启鼠标滚轮缩放

  9. var points = ${points!"[]"};//坐标数组

  10. for (var i = 0; i < points.length; i++) {

  11. var strs = points[i].gisbaidu.split(",");//分割为经度和纬度

  12. var point = new BMap.Point(strs[0], strs[1]);//创建点

  13. var marker = new BMap.Marker(point);//创建标注

  14. map.addOverlay(marker);//添加标注

  15. }

  16. });

  17. </script>


4、效果如图:



更多iOS、Android、Python、Java、MySQL的文章,请点击:

http://blog.csdn.net/jamiecheung


更多Java、Unity3D的文章,请点击:

http://blog.csdn.net/u010841622






本文链接:https://my.lmcjl.com/post/14870.html

展开阅读全文

4 评论

留下您的评论.