百度地图点击添加地点

项目需求

面试时的面试题,整理一下,我是后台的,前端知识不是很懂.欢迎指导!
引入百度地图，需要显示杭州地区的人员分布情况,项目地点可自定义；

显示样子

1.首页样子

点击效果

json数据格式

前端代码

1.HTML部分

<!-- 地图 -->
<div id="allmap" style="height: 600px;width: 100%;overflow: hidden;margin-top:20px;font-family:'微软雅黑';"></div>

2.JS部分

<!-- 地图 -->
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0& ak=你需要申请的密钥"></script>
<script type="text/javascript">
points = new Array();
var points = {:json_encode($place)};//后台传过来的json数组,用于默认显示
//创建标注点并添加到地图中
function addMarker(points) {
    //循环建立标注点
    for(var i=0, pointsLen = points.length; i<pointsLen; i++) {
        var point = new BMap.Point(points[i].lng, points[i].lat); //将标注点转化成地图上的点
        var marker = new BMap.Marker(point); //将点转化成标注点
        map.addOverlay(marker);  //将标注点添加到地图上
        //添加监听事件
        (function() {
            var thePoint = points[i];
            marker.addEventListener("click",
                function() {
                showInfo(this,thePoint);
            });
         })();  
    }
}
function showInfo(thisMarker,point) {
    //获取点的信息
    var sContent = 
    '<ul style="margin:0 0 5px 0;padding:0.2em 0">'  
    +'<li style="line-height: 26px;font-size: 15px;">'   
    +'<li style="line-height: 26px;font-size: 15px;">'  
    +'<span style="width: 50px;display: inline-block;">名称：</span>' + point.name + '</li>'  
    +'<li style="line-height: 26px;font-size: 15px;"><span style="width: 50px;display: inline-block;">操作</span><a onclick="place_del('+point.id+')">删除</a></li>'  
    +'</ul>';
    var infoWindow = new BMap.InfoWindow(sContent); //创建信息窗口对象
    thisMarker.openInfoWindow(infoWindow); //图片加载完后重绘infoWindow
}
    //创建地图
    var map = new BMap.Map("allmap");    
    map.centerAndZoom(new BMap.Point(120.200,30.267), 9);  // 设置中心点
    map.centerAndZoom("杭州");
    map.setCurrentCity("杭州");          
    map.addControl(new BMap.MapTypeControl());   
    map.enableScrollWheelZoom(true);     
    addMarker(points);
    var point = new BMap.Point();//当前坐标经纬可改
    map.centerAndZoom(point,17);//显示级数越大越细
    map.addOverlay(new BMap.Marker(point));//定点坐标红点覆盖
    var geoc = new BMap.Geocoder();    

    // 创建新的地点
    map.addEventListener("click", function(e){   
        //通过点击百度地图，可以获取到对应的point, 由point的lng、lat属性就可以获取对应的经度纬度     
        var pt = e.point;
        geoc.getLocation(pt, function(rs){
            //addressComponents对象可以获取到详细的地址信息
            var addComp = rs.addressComponents;
            var site = addComp.district
            //将对应的HTML元素设置值
            //弹出表单
             var str = '<div class="layui-card-body padding-left-40">'+
                    '<fieldset class="layui-form-item layui-row layui-col-space10">'+
                        '<label class="layui-col-xs4 relative block">'+
                            '<span class="color-green font-w7">地点名称</span>'+
                            '<input name="name" autocomplete="off" value='+site+' placeholder="请输入地点名称" class="layui-input">'+
                        '</label>'+
                        '<label class="layui-col-xs4 relative block">'+
                            '<span class="color-green font-w7">经度</span>'+
                            '<span class="color-desc margin-left-5">lng</span>'+
                            '<input type="text" autocomplete="off" name="lng" value='+pt.lng+' placeholder="请输入经度" class="layui-input">'+
                        '</label>'+
                        '<label class="layui-col-xs4 relative block">'+
                            '<span class="color-green font-w7">纬度</span>'+
                            '<span class="color-desc margin-left-5">lat</span>'+
                            '<input name="lat" autocomplete="off"  value='+pt.lat+' placeholder="请输入纬度" class="layui-input">'+
                        '</label>'+
                    '</fieldset>'+
                    '</div>'
                    //弹窗AJAX提交
                layer.open({
                    type: 1,
                    title: '新建地点',
                    area: ['750px', 'auto'],
                    content: str,
                    btn: ['确认', '取消'],
                    btn1: function (index, layero) {
                        var name = $("input[name ='name']").val();
                        var lng = $("input[name ='lng']").val();
                        var lat = $("input[name ='lat']").val();
                        if (name == ''||lng == ''||lat == '') {
                            layer.msg('请输入信息!', {icon: 1, time: 1000});
                            return false;
                        }
                        $.ajax({
                            type: 'POST',
                            url: "{:url('add_place')}",
                            data: {"name": name, "lng": lng, "lat": lat},
                            success: function (data) {
                                if (data.code == 1) {
                                    layer.msg(data.info,{icon:1,time:3000},function(){
                                        location.reload() ;
                                    });
                                } else {
                                    layer.msg(data.info,{icon:1,time:3000},function(){
                                        location.reload() ;
                                    });
                                }
                            }
                        })
                    },
                    btn2: function (index, layero) {
                        layer.close(index);
                    }
                })
        });             
    });
    // 删除地点
    function place_del(obj){
    layer.confirm('确认要删除该地点？',function(index){
        $.ajax({
            type: 'POST',
            url: "{:url('place_del')}",
            data: {"id":obj},
            dataType: 'json',
            success: function(data){
                if (data.code == 1){
                    layer.msg(data.info,{icon:1,time:3000},function(){
                        location.reload() ;
                    });
                }else{
                    layer.msg(data.info,{icon:1,time:3000},function(){
                        location.reload() ;
                    });
                }

            },
            error:function(data) {
               layer.msg(data.info,{icon:1,time:3000},function(){
                    location.reload() ;
                });
            },
        });
    });
}
</script>

后台代码

	/**
     * 显示后台首页
     */
    public function index()
    {
        $place = $this->app->db->name('ZwPlace')->select()->toArray();//地图数据
        $this->assign('place',$place);
        $this->fetch();
    }

    /**
     * 添加地点
     */
    public function add_place()
    {
       
        $post = $this->request->post();
        $post['create_time'] = date('Y-m-d H:i:s',time());
        $res = $this->app->db->name('ZwPlace')->insert($post);
        if($res){
            $this->success('添加成功!');
        }else{
            $this->error('添加失败 !');
        }
    }

    /**
     * 删除地点
     */
    public function place_del()
    {
       
        $id = $this->request->post('id');
        $res = $this->app->db->name('ZwPlace')->where('id',$id)->delete();
        if($res){
            $this->success('删除成功!');
        }else{
            $this->error('删除失败 !');
        }
    }