H5端根据指定地址显示地图并且可调起三大主流地图软件（腾讯、百度、高德）

一.准备工作：申请接入地图的appKey

二.参考文档：

# 高德地图--获取静态地图
https://lbs.amap.com/api/webservice/guide/api/staticmaps
# 高德地图--移动端拉起app应用
https://lbs.amap.com/api/uri-api/guide/mobile-web/point
# 百度地图--移动端拉起app应用
http://lbsyun.baidu.com/index.php?title=uri/api/web
# 腾讯地图--移动端拉起app应用
https://lbs.qq.com/webApi/uriV1/uriGuide/uriWebMarker

三.代码实现（基于Laravel框架）

控制器

<?php
class DemoController
{public function map(){$address = '广东省广州市黄埔区庙头村庙头旭日街22号';$addressInfo = $this->get_address_detail($address);$gaodeStaticMap = $lat = $lng = $gaodeUriUrl = $baiduUriUrl = $tencentUriUrl = ''; // 高德地图静态地图、经度、纬度if ($addressInfo) {$gaodeStaticMap = $this->get_gaode_static_view($addressInfo);$location = explode(',',$addressInfo['location']);$lat = $location[0];$lng = $location[1];// 获取高德、百度、腾讯的调起app链接$params = ['address' => $address,'lat' => $lat,'lng' => $lng];$gaodeUriUrl = $this->getGaodeUriUrl($params); $baiduUriUrl = '';$tencentUriUrl = $this->getTencentUriUrl($params);}$projectInfo['gaodeStaticMap'] = $gaodeStaticMap; $projectInfo['gaodeUriUrl '] = $gaodeStaticMap;  $projectInfo['baiduUriUrl '] = $baiduUriUrl ;  $projectInfo['tencentUriUrl '] = $tencentUriUrl ;   return view('detail',compact('projectInfo');}// todo 获取地址对应的经纬度信息public function get_address_detail($address){$appkey = ''; // 高德地图appKey$address = urlencode($address);$url = 'https://restapi.amap.com/v3/geocode/geo?address='.$address.'&key='.$appKey;$result = $this->curl_request($url,0,0,1);$urlInfo = json_decode($result,true);if (!$urlInfo ||$urlInfo['status'] != 1 || !$urlInfo['geocodes']) {return false;}return $urlInfo['geocodes'][0];}// todo 获取高德地图静态地图public function get_gaode_static_view(...$params){    $params = $params[0];$appKey = ''; // 高德地图appKey$location = $params['location'];$zoom = isset($params['zoom']) ? $params['zoom'] : 12;$size = isset($params['size']) ? $params['size'] : '600*600';$url = "https://restapi.amap.com/v3/staticmap?location={$location}&zoom={$zoom}&size={$size}&markers=mid,,L:{$location}&key={$appKey}";return $url;}// todo 获取高德地图拉起app链接 public function getGaodeUriUrl(...$params){$params = $params[0];$address = urlencode($params['address']);$location = "{$params['lat']},{$params['lng']}";return "http://uri.amap.com/marker?position={$location}&name={$address}&coordinate=gaode&callnative=1";}// todo 获取腾讯地图拉起app链接 public function getTencentUriUrl(...$params){$params = $params[0];$appKey = ''; // 腾讯地图appKey$address = urlencode($params['address']);$lat = $params['lat'];$lng = $params['lng'];$url = "https://apis.map.qq.com/uri/v1/marker?marker=coord:{$lng},{$lat};title:{$address};addr:{$address}&referer={$appKey}";return $url;}// todo 获取百度地图拉起app链接 public function getBaiduUriUrl(...$params){...}// todo curl请求public function curl_request($url, $params = false, $ispost = 0, $https = 0){$httpInfo = array();$ch = curl_init();curl_setopt($ch, CURLOPT_HTTP_VERSION, CURL_HTTP_VERSION_1_1);curl_setopt($ch, CURLOPT_USERAGENT, 'Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/41.0.2272.118 Safari/537.36');curl_setopt($ch, CURLOPT_CONNECTTIMEOUT, 30);curl_setopt($ch, CURLOPT_TIMEOUT, 30);curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);if ($https) {curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, FALSE); // 对认证证书来源的检查curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, FALSE); // 从证书中检查SSL加密算法是否存在}if ($ispost) {curl_setopt($ch, CURLOPT_POST, true);curl_setopt($ch, CURLOPT_POSTFIELDS, $params);curl_setopt($ch, CURLOPT_URL, $url);} else {if ($params) {if (is_array($params)) {$params = http_build_query($params);}curl_setopt($ch, CURLOPT_URL, $url . '?' . $params);} else {curl_setopt($ch, CURLOPT_URL, $url);}}$response = curl_exec($ch);if ($response === FALSE) {// echo "cURL Error: " . curl_error($ch);return false;}$httpCode = curl_getinfo($ch, CURLINFO_HTTP_CODE); // 响应code$httpInfo = array_merge($httpInfo, curl_getinfo($ch)); // 发起请求方的详细信息curl_close($ch);return $response;}
}

前端页面

<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head>
<body>
<div style="width:500px;"><img style="width:100%;" src="{{$projectInfo['gaodeStaticMap']}}" alt=""><div class="show_map_btn"><button onclick="go_to_map_url('{{$projectInfo['gaodeUriUrl']}}')">高德地图</button><button onclick="go_to_map_url('{{$projectInfo['baiduUriUrl']}}')">百度地图</button><button onclick="go_to_map_url('{{$projectInfo['tencentUriUrl']}}')">腾讯地图</button></div>
</div>
</body>
</html>
<script>function go_to_map_url(url){window.location.href = url;}
</script>

四.可能遇到的问题

1.在调用不同地图的接口时，需要看清楚每个demo接口的经纬度的放置位置；

。。。待续

H5端根据指定地址显示地图并且可调起三大主流地图软件（腾讯、百度、高德）相关推荐

uniapp 移动端调起第三方地图(腾讯,百度,高德)并标注位置,进行导航
点击某个地方,调起下面的方法方法要传入需要标注地点的纬度latitude,经度longitude,名字name //打开第三方地图toMapAPP(latitude,longitude,name){ ...
同一html页面手机pc不同显示,Nginx根据手机端与电脑端设备相同地址显示不同页面内容...
描述:根据用户访问的设备类型,相同的地址显示不同的内容比如,电脑上访问http://192.168.10.100/shop/a.html这个页面显示内容是"AAAAAAAAAAAAA&quo ...
H5页面点击调起腾讯/百度/高德地图APP
注意:在手机端测试时发现了一个问题,用百度浏览器只能调用百度地图app的,对腾讯/高德地图是无效的,于是我用qq浏览器测试,结果发现qq浏览器是都可以调起的. 一:腾讯地图(api文档) window ...
腾讯百度高德 Google 地图导航实现
最近做地图导航功能,顾实现这四种地图导航功能,代码如下: 高德地图代码: public static void openGaoDeMap(Context context, String name, S ...
腾讯,百度,高德地图兴趣点(POI)的获取以及查询,逆解析解析
1.POI数据介绍 POI数据介绍 POI是"Point of Interest"的缩写,中文可以翻译为"兴趣点".POI数据会包含各种信息,如前面提到的名称. ...
根据ip获取经纬度_PHP使用百度地图获取指定地址坐标：创建AK（图文+视频）
本篇文章主要给大家介绍PHP使用百度地图获取指定地址坐标之创建AK(api key)的方法. 我们在前面的文章[PHP使用腾讯地图获取指定地址坐标:创建key][PHP使用腾讯地图获取指定地址坐标:经 ...
第三方应用APP唤起/调起三大地图百度/腾讯/高德的点/导航安卓和ios 带有三大地图的API开放平台地址
三大地图 APP 判断 "com.baidu.BaiduMap "com.autonavi.minimap "com.tencent.map ...
小程序适配H5端跨域问题解决
小程序本身自带有解决跨域的方法,但是当小程序运行到浏览器的时候,由于写小程序的时候并没有处理跨域,所以H5端做相同的axios请求,小程序没有报错,H5端却会报错解决方法: 我们需要到manifes ...
手机app调起百度高德地图
需求: 通过手机app显示地图,点击去导航调起高德.百度地图app: 找了其他大神的,但经纬度不准确问题困扰了好久,去地图开放平台查了下文档,完美解决~ methods: {// 方法要传入需要标注地 ...

H5端根据指定地址显示地图并且可调起三大主流地图软件（腾讯、百度、高德）

一.准备工作：申请接入地图的appKey

二.参考文档：

三.代码实现（基于Laravel框架）

控制器

前端页面

四.可能遇到的问题

H5端根据指定地址显示地图并且可调起三大主流地图软件（腾讯、百度、高德）相关推荐

最新文章

热门文章