基于高德API的把数据库内数据回显在地图上，推荐骑行线路，删除功能。

1.数据回显

//数据库里的照片回显
    $.ajax({
        url : "/callback",
        type : "get",
        dataType : "json",

        success : function(data) {
            var marker;
            for (var i = 0; i < data.length; i++) {
                var jfong = [data[i].lng, data[i].lat];
                var type = data[i].type;
                if (type == "猫") {
                    marker = new AMap.Marker({
                        position: jfong,
                        icon: catIcon,
                        offset: new AMap.Pixel(-13, -30),
                        map: map
                    });
                    console.log("猫成功！")
                } else {
                    marker = new AMap.Marker({
                        position: jfong,
                        icon: dogIcon,
                        offset: new AMap.Pixel(-13, -30),
                        map: map
                    });
                    console.log("狗成功！")
                }


                marker.setMap(map);

                marker.imagePath = "animalImages/" +data[i].imagePath;
                marker.content = data[i].content;
                marker.type=data[i].type;
                marker.animalId=data[i].animalId;
                marker.lng=data[i].lng;
                marker.lat=data[i].lat;


                marker.on('click', function (e) {
                    infoWindow.setContent("<div class='info-top'><div>"+e.target.type+"</div><img id='Recommend' src='https://webapi.amap.com/images/close2.gif' onclick='closeInfoWindow()'></div>"
                       +"<div class='info-middle' style='background-color: white'>"
                        +"<ul class='layui-form layui-form-pane' style='margin: 15px' id='ul1'><li></li>"
                        + "<li><img id='img1' src='"+e.target.imagePath+"'/></li>"
                        + "<li>  <span style='color: #0f74a8'>描述: </span></li>"
                        + "<li id='li1'> " + e.target.content + "</li>"
                        + "<li>"
                        + " <input id='recommend' type='button' onclick='recommend("+e.target.lng+","+e.target.lat+")' value='去这'/>"
                        +"<input type='hidden' id='delete' value='"+e.target.animalId+"'>"
                        + " <input type='button' style='color: red;float: right' onclick='Delete()' value='删除'/>"
                        + "</li>"
                        + "</ul>"
                        +"</div>"
                        +"<div class='info-bottom' style='position: relative;top: 0px;margin: 0 auto'>"
                        +"<img src='https://webapi.amap.com/images/sharp.png'/>"
                        + "</div>");
                    infoWindow.open(map, e.lnglat);
                });

               markers.push(marker);

            }	// for-end

            infoWindow = new AMap.InfoWindow({
                isCustom:	true,
                draggable: true,  //是否可拖动
                offset: new AMap.Pixel(0, -31),
                content:""
            });

        }


    }) //	Ajax结束

   //关闭信息窗口
    function closeInfoWindow() {
        map.clearInfoWindow();
    }

      这里及以下代码都用了高德API，需要到高德平台申请密钥才能使用。

      用Ajax请求后台，得到数据库内的数据返回给前端。前端的每一个marker点附有自己属性的对话框，在地图上点击相应的点就可以打开对话框。用for循环遍历所有数据库内的点数据展示在地图上， marker.imagePath，marker.content 等都是表示这点的相关属性（可以自己随心定义的），用e.target.xxx来赋给每个地图上的点的对话框中相应属性。

---

2. 推荐线路

 //显示推荐线路
    function recommend(lng,lat){
        //关闭信息窗口
        document.getElementById("Recommend").click();
        $("#panel").css("display",'block');//显示div
        //骑行导航
        riding = new AMap.Riding({
        map: map,
            panel: "panel1"
        });
        console.log(lnglat);
        console.log("destination:"+lng+","+lat);
        //根据起终点坐标规划骑行路线
        riding.search(lnglat,[lng,lat], function(status, result) {
            // result即是对应的骑行路线数据信息，相关数据结构文档请参考  https://lbs.amap.com/api/javascript-api/reference/route-search#m_RidingResult
            if (status === 'complete') {
                log.success('绘制骑行路线完成')
            } else {
                log.error('骑行路线数据查询失败' + result)
            }
        });
    }

    //清除显示推荐线路
    function clearRoute(){
        riding.clear();
        $("#panel").css("display","none");//隐藏div
    }

       点击对话框中“去这”，关闭对话框，获得当前定位去相应地点的骑行线路推荐，lnglat是我的全局变量对应定位的坐标，而[lng,lat]则是对应地图上的红蓝地标坐标，线路推荐会展示在id为panel1的要素上，而panel1要素再id为panel的要素内，隐藏关闭panel，panel1也就关闭了。

---

3.删除功能

//删除marker
    function Delete() {

        layui.use('layer', function(){
            var $ = layui.jquery;
            // 删除操作
            var sid= document.getElementById("delete").value;


                layer.confirm("确认要删除吗，删除后不能恢复", { title: "删除确认" }, function (index) {

                    $.ajax({
                        type:"POST",
                        url: '/delete?sid='+sid,   //接口请求地址
                        contentType:false,
                        processData: false,
                        success:function(data){
                            layer.msg(data);
                            layer.close(index)
                            window.setTimeout(function () {
                                window.location.reload();
                            },1500)
                            console.log("请求成功之后，调用接口返回的数据");
                        }
                    });

                });


        })
    }

前端用了layUI来做确定删除提示，用Ajax将要删除的地点marker的id传给后端，后端接受数据并进行删除操作。

@ResponseBody
    @RequestMapping("/delete")
    public String delete(@RequestParam("sid") String sid){
        int parseInt = Integer.parseInt(sid);
        Integer integer = animalService.deleteAnimal(parseInt);
        if(integer>0){
            return "删除成功！";
        }
        else {
            return "删除失败!";
        }
    }