高德地图选择位置然后生成静态地图

今天整理一个高德地图的小demo，下面的图是我实现的效果

20190326_151321.gif

我要的这个效果，既用到了web服务与web端的高德服务，需要先从高德地图的开发平台创建自己的应用，并增加相应的key。

//引入js文件

    

//html


        
        

            
            
            
            
            
                   
        
        

        插入
    

//js
function addMap(){
            $("#hid_map").show();
        $('#tipinput').val('');
            //地图加载
        var map = new AMap.Map("container", {
            resizeEnable: true
        });
        //输入提示
        var autoOptions = {
            input: "tipinput"
        };
        var auto = new AMap.Autocomplete(autoOptions);
        var placeSearch = new AMap.PlaceSearch({
            map: map
        });  //构造地点查询类
        AMap.event.addListener(auto, "select", select);//注册监听，当选中某条记录时会触发
        function select(e) {
            AMap.event.addListener(placeSearch, "markerClick",markerClick_CallBack);
            placeSearch.setCity(e.poi.adcode);
            placeSearch.search(e.poi.name);  //关键字查询查询
        }
}
//关闭地图
    function closeMap(){
        $("#hid_map").hide();
    }
//marker点击事件
function markerClick_CallBack(data){
        //name
        var name = data.data.name;
        //address
        var address = data.data.cityname+data.data.adname+data.data.address;
        //经度
        var latitude = data.data.location.lat;
        //纬度
        var longitude = data.data.location.lng;
        $('#address').val(address);
        $('#name').val(name);
        $('#latitude').val(latitude);
        $('#longitude').val(longitude);
    }
//生成静态地图
    function rocaAdd(){
        var name = $('#name').val();
        //address
        var address = $('#address').val();
        //经度
        var latitude = $('#latitude').val();
        //纬度
        var longitude = $('#longitude').val();
        if(name=="" || address=="" || latitude=="" || longitude==""){
            alert('请选择位置');         
        }
        var src = "https://restapi.amap.com/v3/staticmap?key={$key_image}&location="+longitude+","+latitude+"&zoom=19&size=264*92&markers=mid,0xFF0000,A:"+longitude+","+latitude;
        $("#all_content .textarea").each(function(){
            if($(this).text() == ""){
                //$(this).attr("class","hid");
                $(this).hide();
            }
        });
        var map = 
        "
"+
            "
"+name+"
"+
            ""+
            "
地图
"+
        "
";
        $("#all_content").append(map);
        $("#all_content").append('
');
        $("#hid_map").hide();
    }