高德地图

html代码

<tr>
                        <td class="text">地图:</td>
                        <td colspan="5" class="input">
                            <div id="container">
                                <div style="z-index: 105;position: absolute;top: 10px;right: 10px;">
                                    <div style="position:relative">
                                        <span style="position: absolute;font-size: 18px;left: 10px;top: 0;color: #ccc;line-height: 34px;"><i class="fa fa-search"></i></span>
                                        <input type="text" id="search_map" class="form-control" style="padding-left: 40px" placeholder="搜索...">
                                    </div>
                                    <div id="panel"></div>
                                </div>
                            </div>
                            <div class="help-block">
                                纬度：<input type="text" class="form-control text-width-normal" name="lon" id="lon" readonly value="{$data['lon']}">&emsp;
                                经度：<input type="text" class="form-control text-width-normal" name="lat" id="lat" readonly value="{$data['lat']}">&emsp;
                                地址：<input type="text" class="form-control text-width-normal" name="position" id="position" value="{$data['position']}" readonly>
                            </div>
                        </td>
                    </tr>

<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.12&key=key&plugin=AMap.Geocoder"></script>

// 地图
        $(function () {
            if ($('#id').val() != '') {
                var map = new AMap.Map('container', {
                    zoom: 15,//级别
                    center: ["{$data['lon']}", "{$data['lat']}"],//中心点坐标
                });
                // 创建一个 Marker 实例：

                var marker = new AMap.Marker({
                    position: new AMap.LngLat("{$data['lon']}", "{$data['lat']}"),   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
                });
                $('#lat').val("{$data['lat']}")
                $('#lon').val("{$data['lon']}");
                $('#position').val("{$data['position']}");
                if($('#position').val() == ''){
                    $('#position').val("{$data['address']}");
                }
            } else {
                var map = new AMap.Map('container', {
                    zoom: 15,//级别
                    center: [116.39, 39.9],//中心点坐标
                });
                var marker = new AMap.Marker({
                    position: new AMap.LngLat(116.39, 39.9),   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
                });
            }


            var geocoder = new AMap.Geocoder({
                radius: 1000 //范围，默认：500
            });
            // 将创建的点标记添加到已有的地图实例：
            map.add(marker);
            // 移除已创建的 marker
            var clickHandler = function (e) {
                map.remove(marker);
                delete marker;
                marker = new AMap.Marker({
                    position: new AMap.LngLat(e.lnglat.getLng(), e.lnglat.getLat())
                });
                map.add(marker);

                geocoder.getAddress([e.lnglat.getLng(), e.lnglat.getLat()], function (status, result) {
                    if (status === 'complete' && result.regeocode) {
                        var address = result.regeocode.formattedAddress;
                        $('#lat').val(e.lnglat.getLat())
                        $('#lon').val(e.lnglat.getLng());
                        $('#position').val(address);


                    } else {
                        alert("当前位置不支持")
                    }
                });

            };
            // 绑定事件
            map.on('click', clickHandler);
            AMap.service(["AMap.PlaceSearch"], function() {
                //构造地点查询类
                var placeSearch = new AMap.PlaceSearch({
                    pageSize: 4, // 单页显示结果条数
                    pageIndex: 1, // 页码
                    city: "全国", // 兴趣点城市
                    citylimit: true,  //是否强制限制在设置的城市内搜索
                    map: map, // 展现结果的地图实例
                    panel: "panel", // 结果列表将在此容器中进行展示。
                    autoFitView: true // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
                });
                placeSearch.on('selectChanged', function(e) {

                    $('#lat').val(e.selected.data.location.lat)
                    $('#lon').val(e.selected.data.location.lng);
                    $('#position').val(e.selected.data.address);
                })
                //关键字查询
                $('#search_map').on('input', function() {
                    var search = $(this).val();
                    if(search == '') {
                        placeSearch.clear();
                        return false;
                    }
                    placeSearch.search(search);
                    map.remove(marker);
                })
            });
        })