先上效果图:
父页面部分:
function show_map() {
layer.open({
type: 2,
title: false,
scrollbar: false,
closeBtn: 1,
area: [($(window).width()*0.8)+'px', ($(window).height()*0.9)+'px'],
skin: 'demo-class', //没有背景色
shadeClose: true,
content: ['/admin/set/show_map','no'],
})
}
子页面点击保存、退出按钮
function close_win() {
if(parent.layer){
var index = parent.layer.getFrameIndex(window.name);
parent.layer.close(index);
}
}
function save() {
var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
var city = $('#input').val();
var location = $('#location').val();
parent.$('#city').val(city)
parent.$('#address').val(location);
parent.layer.close(index);
}
高德地图JavaScript部分:
<script type="text/javascript">
var map = new AMap.Map('container',{
resizeEnable: true,
zoom: 13,
//center: [116.39,39.9]
});
AMap.plugin('AMap.Geocoder',function(){
var geocoder = new AMap.Geocoder({
//city: "010"//城市,默认:“全国”
});
var marker = new AMap.Marker({
map:map,
bubble:true
})
var input = document.getElementById('input');
var message = document.getElementById('message');
var location = document.getElementById('location');
map.on('click',function(e){
marker.setPosition(e.lnglat);
geocoder.getAddress(e.lnglat,function(status,result){
if(status=='complete'){
input.value = result.regeocode.formattedAddress
location.value = e.lnglat
message.innerHTML = ''
}else{
message.innerHTML = '无法获取地址'
}
})
})
input.onchange = function(e){
var address = input.value;
geocoder.getLocation(address,function(status,result){
if(status=='complete'&&result.geocodes.length){
marker.setPosition(result.geocodes[0].location);
map.setCenter(marker.getPosition())
location.value = result.geocodes[0].location
message.innerHTML = ''
}else{
message.innerHTML = '无法获取位置'
}
})
}
});
</script>
高德地图API接口最好去高德地图开发平台查看官方文档
使用之前需要先注册账号,申请KEY