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']}"> 
经度:<input type="text" class="form-control text-width-normal" name="lat" id="lat" readonly value="{$data['lat']}"> 
地址:<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);
})
});
})