html
<div class="form-group">
<label class="col-sm-2 control-label">门店名称:</label>
<div class="col-sm-9">
<input type="text" id="md_name" value="" name="md_name" class="form-control" placeholder="请输入门店名称称">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">门店坐标:</label>
<div class="col-sm-9">
<input type="text" id="coordinate" value="" name="coordinate" class="form-control" placeholder="门店坐标(点击地图获取)">
<input type="hidden" name="longitude" id="longitude" value="">
<input type="hidden" name="latitude" id="latitude" value="">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">门店地址:</label>
<div class="col-sm-9">
<input type="text" id="md_addr" value="" name="md_addr" class="form-control" placeholder="门店地址(点击地图获取)">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">高德地图:</label>
<div class="col-sm-9">
<div id="container" tabindex="0" style="width:530px;height:350px"></div>
</div>
</div>
js(需要引入jquery)
<script src="https://webapi.amap.com/maps?v=1.4.2&key=高德申请的key&plugin=AMap.Geocoder"></script>
<script type="text/javascript">
var marker, map = new AMap.Map('container',{
resizeEnable: true,
center: [116.650687,35.012617],
// mapStyle: "amap://styles/blue",
mapStyle: "amap://styles/normal",
zoom:10
});
var aa = null;
//为地图注册click事件获取鼠标点击出的经纬度坐标
map.on('click', function(e) {
var longitude = e.lnglat.getLng();
var latitude = e.lnglat.getLat();
var coordinate = e.lnglat.getLng() + ',' + e.lnglat.getLat();
$("#longitude").val(longitude);
$("#latitude").val(latitude);
$("#coordinate").val(coordinate);
// alert($("#coordinate").val());
marker = new AMap.Marker({
// icon: "http://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
position: [longitude,latitude],
// offset: new AMap.Pixel(-13, -30),
// title: coordinate[i].name,
// map: map
});
if(aa){
map.remove(aa);
}
aa = marker
marker.setMap(map);
regeoCode(coordinate);
});
var geocoder = new AMap.Geocoder({
// city: "010", //城市设为北京,默认:“全国”
// radius: 1000 //范围,默认:500
});
function regeoCode(lnglat) {
geocoder.getAddress(lnglat, function(status, result) {
if (status === 'complete'&&result.regeocode) {
var address = result.regeocode.formattedAddress;
$("#md_addr").val(address);
}else{
log.error('根据经纬度查询地址失败')
}
});
}
</script>
效果图