需求
后台新增/编辑活动项目时，用户可以自己通过地图插件选择位置（手动定位），选择后，系统能够获得当前位置的地址信息以及坐标信息，以方便后续程序的处理。
代码
不啰嗦，直接看代码：
表单页面（截选）：
<!-- 地址、坐标start -->
<div class="form-group has-feedback">
<label class="col-md-3 control-label">地址</label>
<div class="col-md-4">
<input id="address" type="text" class="form-control" name="address" value="" placeholder="地址">
</div>
<div class="col-md-5" style="margin-left:-20px;">
<a id="getgps" class="btn btn-primary">点击选择</a>
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label">经纬度</label>
<div class="col-md-9 form-inline">
<input type="text" class="form-control" id="longitude" name="longitude" value="" placeholder="经度" size="10">
<input type="text" placeholder="经度" value="" id="latitude" name="latitude" class="form-control" size="10">
</div>
</div>
<!-- 地址、坐标end -->
<!-- 弹出层操作start -->
<script>
$(function(){
// 拾取坐标
$('#getgps').on('click',function(){
//iframe层
layer.open({
index:'oif',
type: 2,
title: '拾取坐标',
shadeClose: true,
shade: 0.8,
area: ['60%', '70%'],
content: "{:url('admin/baidumap/getgps')}" //iframe的url
});
});
});
function close_f() {
layer.closeAll();
}
</script>
<!-- 弹出层操作end -->地图弹出层页面：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=my_ak"></script>
<title>单击获取点击的经纬度</title>
</head>
<body>
<div id="allmap"></div>
</body>
</html>
<script type="text/javascript" src="/static/admin/js/jquery.min.js"></script>
<script type="text/javascript">
// 百度地图API功能
var map = new BMap.Map("allmap"); // 创建对象
map.centerAndZoom("合肥",12); // 初始文职
map.enableScrollWheelZoom(true); // 允许鼠标滚轮放大缩小
//单击获取点击的经纬度
map.addEventListener("click",function(e){
window.parent.$('#longitude').val(e.point.lng);
window.parent.$('#latitude').val(e.point.lat);
var get_address_url = " http://api.map.baidu.com/geocoder/v2/?output=json&ak=D609d0ffb67e0b155cdb15681cdc85ab&location="+e.point.lat+","+e.point.lng+"";
$.get("{:url('admin/baidumap/getpagecontent')}",{link:get_address_url},function(data){
data = JSON.parse(data);
var location_url = data.result.formatted_address;
var isw = window.parent.$('#address').val(location_url);
if(isw){
window.parent.close_f();
}
});
});
</script>
PHP获取页面结果方法：
/**
* 根据网址获取页面内容
*
* @param $link
*
* @return string
*/
public function getPageContent($link)
{
$link = trim($link);
$content = file_get_contents($link);
return $content;
}总结
流程上可以分为：点击按钮弹出子窗口页面 -> 手动鼠标选择页面位置 -> 父页面地址和坐标分别获取到值 -> 子页面关闭。
技术上主要以百度地图API为核心，layer弹出层和PHP百度api中结果配合，js父子页面传值引导达成目标。
因为很简单，其他的也不多说了，有兴趣的可以申请个ak码试试，百度官方也有很多示例。
地址
JavaScript API 类参考:[http://developer.baidu.com/map/reference/index.php][1]
JavaScript API demo演示：[http://developer.baidu.com/map/jsdemo.htm#a1_2][2]
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。