<div class="layui-form-item">
	<label class="layui-form-label">仓库坐标</label>
	<div class="layui-inline">
		<input id="searchAddress" type="text" placeholder="搜索地址" class="layui-input"
			   style="width: 300px;display: inline">
		<button type="button" class="layui-btn layui-btn-xs layui-btn-normal layui-inline"
				style="margin-left: 20px;" id="searchBtn">搜索
		</button>
	</div>
	<div class="layui-input-block">
		<p class="help-block coordinate">点击地图选择坐标</p>
		<div id="container" class="map" style="width: 500px;height: 300px;"></div>
		<input name="lng" value="" style="display: none">
		<input name="lat" value="" style="display: none">
	</div>
</div>
<script src="https://webapi.amap.com/maps?v=1.4.15&key=申请的key值&callback=init&plugin=AMap.Autocomplete"></script>
<script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script>
<script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>
<script>
    //坐标
    var lng;
    var lat;
    //地图标记点
    var marker = false;
    //搜索方法
    var placeSearch;
    //自动展示搜索
    var autoComplete;
    //非thinkadmin框架，可不调用windows.init直接执行
    window.init = function () {
        var map = new AMap.Map("container", {
            resizeEnable: true,
        });
        AMap.service(["AMap.PlaceSearch", 'AMap.Autocomplete'], function () {
            //自动展示搜索结果
            // 实例化Autocomplete
            var autoOptions = {
                // input 为绑定输入提示功能的input的DOM ID
                input: 'searchAddress',
                city: '唐山市',
                cityLimit: false
            }
            autoComplete = new AMap.Autocomplete(autoOptions);

            //构造地点查询类
            placeSearch = new AMap.PlaceSearch({
                pageSize: 5, // 单页显示结果条数
                pageIndex: 1, // 页码
                city: '0315',
                citylimit: false,  //是否强制限制在设置的城市内搜索
                map: map, // 展现结果的地图实例
                autoFitView: true // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
            });
        });
        //btn搜索事件
        $('#searchBtn').click(function () {
            let val = $('#searchAddress').val();
            placeSearch.search(val);
        });
        //点击搜索结果自动搜索
        autoComplete.on('select', function (e) {
            placeSearch.search(e.poi.name);
        });

        //选择搜索出来的点的坐标
        placeSearch.on('markerClick', function (e) {
            setLatLng(e.data.location.lat, e.data.location.lng);
            if (marker) map.remove(marker);
        })

        //页面加载完毕中心点
        map.on('complete', function () {
            // console.log(map.getCenter());
        });
        //为地图注册click事件获取鼠标点击出的经纬度坐标
        map.on('click', function (e) {
            //移除已经存在的标记点
            if (marker) map.remove(marker);
            //设置坐标
            lng = e.lnglat.lng;
            lat = e.lnglat.lat;
            setLatLng(lat, lng);
            //创建标记点
            marker = new AMap.Marker({
                position: new AMap.LngLat(e.lnglat.lng, e.lnglat.lat),
                title: '标记点'
            });
            map.add(marker);
        });

        //设置显示的坐标点
        function setLatLng(lat, lng) {
            $('.coordinate').html('经度:' + lng + '，纬度:' + lat);
            $('input[name="lng"]').val(lng);
            $('input[name="lat"]').val(lat);
        }
    }
</script>