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

20190326_151321.gif

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

//引入js文件
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.12&key={$key}&plugin=AMap.Autocomplete,AMap.PlaceSearch"></script>
    <script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script>

//html
<img class="addmap" src="__STATIC__/images/insert_location.png" onclick="addMap()">
<div id="hid_map" class="tag" style="display: none;">
        <span class="span"><em class="em"></em></span>
        <div id="myPageTop">
            <input id="tipinput" placeholder="请输入地名" />
            <input type="hidden" name="address" value="" id="address">
            <input type="hidden" name="name" value="" id="name">
            <input type="hidden" name="latitude" value="" id="latitude">
            <input type="hidden" name="longitude" value="" id="longitude">
            <span class="close" onclick="closeMap()"></span>       
        </div>
        <div id="container"></div>
        <a id="rocaAdd" onclick="rocaAdd()">插入</a>
    </div>

//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 = 
        "<div id='"+mapId+"' onclick='del("+mapId+",1)' class='map_image'>"+
            "<div class='map_name'>"+name+"</div>"+
            "<img src='"+src+"' width='264' height='92'>"+
            "<div class='map_icon'><img src='__STATIC__/images/map_logo.png'><span>地图</span></div>"+
        "</div>";
        $("#all_content").append(map);
        $("#all_content").append('<div class="textarea" contenteditable="true" placeholder="点此输入正文"></div>');
        $("#hid_map").hide();
    }