最近做项目有个需求是页面打开百度地图，并定位获取坐标信息，获取后返回页面。
这几个步骤都不能离开当前页面，因为当前页面填写了信息。那么只能通过弹窗获取页面信息。
网上找到layer的弹窗页面，打开百度地图，之后点击获取地图坐标，返回当前页面。
代码如下：
引入layer
<script src="/layer/layer.js"></script>
打开地图按钮
<div class="mui-input-row">
<label>定位</label>
<button type="button" id="getgps" class="mui-btn mui-btn-primary">定位</button>
</div>
<div class="mui-input-row">
<label>经纬度</label>
<input type="text" name="jingwei" id="jingwei" autocomplete="off" class="jz-input mui-input-clear" placeholder="请输入经纬度">
</div>
<input name="longitude" id="longitude" value="" type="hidden">
<input name="latitude" id="latitude" value="" type="hidden">
<div class="mui-input-row">
<label>污染地址</label>
<input type="text" name="address" autocomplete="off" id="address" class="jz-input mui-input-clear" placeholder="请输入地点">
</div>
JS代码
$(document).ready(function(){
// 拾取坐标
$('#getgps').click(function(){
//iframe层
layer.open({
index:'oif',
type: 2,
title: '拾取坐标',
shadeClose: true,
shade: 0.8,
area: ['80%', '70%'],
content: "/common/map" //iframe的地图url
});
});
});
地图页面：
<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 src="{$tpl}index/js/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=m2KYs1ivfLDMYChGE8ccFrDf"></script>
<title>浏览器定位</title>
</head>
<body>
<div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
// 百度地图API功能
var map = new BMap.Map("allmap"); // 创建对象
map.centerAndZoom("廊坊",12); // 初始文职
map.addEventListener("touchmove", function (e) {
map.enableDragging();
});
// TODO: 触摸结束时触发次此事件 此时开启禁止拖动
map.addEventListener("touchend", function (e) {
map.disableDragging();
});
// 初始化地图 禁止拖动 注：虽禁止拖动，但是可以出发拖动事件
map.disableDragging();
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=m2KYs1ivfLDMYChGE8ccFrDf&location="+e.point.lat+","+e.point.lng+"";
$.get("/common/getpagecontent",{link:get_address_url,lat:e.point.lat,lng:e.point.lng},function(data){
data = JSON.parse(data);
var location_url = data.result.formatted_address+data.result.sematic_description;
var isw = window.parent.$('#address').val(location_url);
var longitude = window.parent.$('#longitude').val(data.result.location.lng);
var latitude = window.parent.$('#latitude').val(data.result.location.lat);
window.parent.$('#jingwei').val(data.result.location.lat.toFixed(6)+','+data.result.location.lng.toFixed(6));
if(isw){
window.parent.close_f();
}
});
});
//关于状态码
//BMAP_STATUS_SUCCESS 检索成功。对应数值“0”。
//BMAP_STATUS_CITY_LIST 城市列表。对应数值“1”。
//BMAP_STATUS_UNKNOWN_LOCATION 位置结果未知。对应数值“2”。
//BMAP_STATUS_UNKNOWN_ROUTE 导航结果未知。对应数值“3”。
//BMAP_STATUS_INVALID_KEY 非法密钥。对应数值“4”。
//BMAP_STATUS_INVALID_REQUEST 非法请求。对应数值“5”。
//BMAP_STATUS_PERMISSION_DENIED 没有权限。对应数值“6”。(自 1.1 新增)
//BMAP_STATUS_SERVICE_UNAVAILABLE 服务不可用。对应数值“7”。(自 1.1 新增)
//BMAP_STATUS_TIMEOUT 超时。对应数值“8”。(自 1.1 新增)
</script>PHP相关函数
//地图页面展示
function map(){
$this->display('map');
}
/**
* 根据网址获取页面内容
*
* @param $link
*
* @return string
*/
public function getpagecontent()
{
// $link = $this->frparam('link',1);
// $link = trim($link);
$api = 'http://api.map.baidu.com/geocoder/v2/';
$data['ak'] = '你的百度ak';
$data['location'] = $this->frparam('lat',1).','.$this->frparam('lng',1);
$data['output'] = 'json';
$link = $api.'?'.http_build_query($data);
$content = file_get_contents($link);
//$content = curl_request($link);
echo $content;
}
