H5实现页面打开百度地图并点击地图定位后返回当前页面

热度:752020-09-01 08:20 收藏 0 点赞 0

最近做项目有个需求是页面打开百度地图,并定位获取坐标信息,获取后返回页面。

这几个步骤都不能离开当前页面,因为当前页面填写了信息。那么只能通过弹窗获取页面信息。

网上找到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;
	 }


暂无评论
登录后才可以评论~立即登录

如何获取资源?

您可以关注底部公众号,回复文章提示的 “ 关键词 ” 获取对应资源。

每日分享

每日分享收集的网络资源,其中包含开源项目、小工具、常用软件,以及音频视频、电子书籍等。

分享两个远程工具-ToDesk和向日葵

分享两个远程工具-ToDesk和向日葵...

在工作生活中经常用到远程,QQ远程很卡,第三方远程工具就比较方便了。

爱奇艺万能播放器2018年完整版

爱奇艺万能播放器2018年完整版

2018年的爱奇艺万能播放器,功能齐全,没有广告!

分享500套个人求职简历模板

分享500套个人求职简历模板

500套免费求职简历下载!

一款最近很火的自动跳过广告APP,无root直装版

一款最近很火的自动跳过广告APP,...

自动跳过广告,无需root

WPS免费去广告电脑软件

WPS免费去广告电脑软件

wps广告实在太多了,下载一个去广告版本

强制突破进入好友QQ空间

强制突破进入好友QQ空间

一款突破好友进入QQ空间的软件