在H5页面内通过地址调起高德地图实现导航
项目中用到的一个功能是要通过点击地址来实现打开地图app实现地址导航。
如下图：
实现思路就是在H5页面内通过点击marker图标然后进行当前位置与页面上地址的路程规划与导航。
由于项目中用到的是高德地图，所以这里用到的是调起高德地图APP来实现该功能。
首先肯定要去高德开放平台去申请KEY，拿到这个KEY后通过调用js代码就可以实现该功能。
之前在H5页面中无论是做导航还是定位一般我都是采用marker进行选点操作的，JSAPI中提供的一系列的方法可以很轻松的实现该功能，
该功能实现过程，我用的php语言进行配合操作，版本为TP5，首先我通过点击上个页面中的marker图标跳转到控制器，在控制器接收该地址，通过PHP方法获取该地址的经纬度，这个实现过程我就不贴图展示了，获取到经纬度后我通过赋值渲染到html页面后代码如下：
<!DOCTYPE html>
<html>
<head lang="en">
<include file="Public/header" />
<style>
body,#mapContainer{
margin:;
height:100%;
width:100%;
font-size:12px;
}
</style>
<link rel="stylesheet" href="http://cache.amap.com/lbs/static/main.css?v=1.0?v=1.0" />
<script src="http://cache.amap.com/lbs/static/es5.min.js"></script>
<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=申请的KEY值&plugin=AMap.ToolBar"></script>
<script>
function init() {
map = new AMap.Map("mapContainer", {
zoom: 18,
center:["{$lng}","{$lat}"]
});
marker = new AMap.Marker({
map:map,
position:["{$lng}","{$lat}"]
})
marker.setLabel({
offset: new AMap.Pixel(20, 20),//修改label相对于maker的位置
content: "点击Marker打开高德地图"
});
marker.on('click',function(e){
marker.markOnAMAP({
position:marker.getPosition()
})
})
map.addControl(new AMap.ToolBar());
if(AMap.UA.mobile){
document.getElementById('button_group').style.display='none';
}
}
</script>
</head>
<body onload="init()">
<div id="mapContainer" ></div>
<div class="button-group" id='button_group' style='top:15px;bottom:inherit'>
</div>
</body>
</html>
其中 有两个处代码需要改变成变量
一个是：
map = new AMap.Map("mapContainer", {
zoom: 18,
center:["{$lng}","{$lat}"]
});
另外一处：
marker = new AMap.Marker({
map:map,
position:["{$lng}","{$lat}"]
})
然后，执行一下，效果如图：
点击marker之后如图：
这就可以了，挺简单的一个小功能。
本文属原创内容，为了尊重他人劳动，转载请注明本文地址：
http://www.cnblogs.com/luokakale/p/8716430.html
在H5页面内通过地址调起高德地图实现导航的更多相关文章
- 微信H5页面内实现一键关注公众号
H5页面内实现关注公众号的微信JSSDK没有相关接口开放,因此就得动点脑筋来实现该功能了.下面的方法就是通过一种非常蹊跷的方式实现的. 首先,需要在公众号内发表一篇原创文章,注意是原创文章,然后由另一 ...
- 如何实现在H5里调起高德地图APP？
http://www.cnblogs.com/milkmap/p/5912350.html 这一篇文章,将讲述如何在H5里调起高德地图APP,并展示兴趣点.适合于展示某个餐馆,商场等,让用户自行选择前 ...
- 如何实现在H5里调起高德地图APP？（下）
这一篇文章将告诉您,如果直接打开高德地图APP,并展示路线规划.适合有定位的移动设备,可以查询到从“我的位置”到目的地的路径规划,并直接导航. 场景二.调起高德地图的路线规划功能 导航是目前JSAPI ...
- 如何实现在H5里调起高德地图APP？（上）
这一篇文章,将讲述如何在H5里调起高德地图APP,并展示兴趣点.适合于展示某个餐馆,商场等,让用户自行选择前往方式. 场景一.在高德地图上展示Marker点或者POI标记 在一些基于位置分享的应用开发 ...
- 如何实现在H5里调起高德地图APP
这一篇文章将告诉您,如果直接打开高德地图APP,并展示路线规划.适合有定位的移动设备,可以查询到从“我的位置”到目的地的路径规划,并直接导航. 场景二.调起高德地图的路线规划功能 导航是目前JSAPI ...
- h5页面 内嵌h5页面遇到的问题
1.input框无法获取焦点输入内容 input { -webkit-user-select: auto; } 2.div里面放img标签有3px的距离 div { font-size: 0; } i ...
- Java 通过地址获取经纬度 - 高德地图
一.添加依赖 <dependency> <groupId>org.hibernate</groupId> <artifactId>hibernate-v ...
- Html5页面内使用JSON动画的实现
有一天我们的UI设计师找到我说,要把页面中我自己用程序写的动画,换成他们给的json动画,原因是有的动画很复杂,自己写起来达不到他们的预期效果(写到这里我突然想到一个问题,这么复杂的动画为什么不使用g ...
- 自定义H5页面规范
查看详情页也可支持自定义H5页面,用来展示更多内容. 交互规范 分屏切换,支持横向和竖向,滑动指引需清晰 若详情页加载较慢,需设计loading页,给予用户友好的提示 如有视频,需在底部加上“建议在W ...
随机推荐
- Django之模板层
在一个项目里面有一个专门放模板的文件夹Templates,有一个专门放视图的文件views,而且我们大多给浏览器响应的都应该是一个完整的页面,也就是读取的是一个HTML文件,然后再返回给浏览器.但我们 ...
- dom操作------获取长/宽/距离等值的若干方法
1.offsetLeft:获取元素边框以外至文档顶的距离:若其祖先元素有定位属性position则返回值为元素到该定位元素的距离,不包括祖先元素的三宽(padding,border,margin),且 ...
- Mybatis 3 配置 Log4j
Mybatis与Log4j 最常用的日志输出是Log4j,将相应的jar包和配置文件放到相应的位置,Mybatis就可以通过Log4j将SQL语句打印出来. 配置Log4j.properties 将l ...
- C# 性能优化 之 秒表 Stopwatch。
生词解释:Diagnostics[,daɪəg'nɑstɪks] n.诊断学 using System.Diagnostics; Stopwatch sw = new Stopwatch (); sw ...
- Spark中master与worker的进程RPC通信实现
1.构建master的actor package SparkRPC import akka.actor.{Actor, ActorSystem, Props}import com.typesafe.c ...
- Java框架之Struts2（三）
一.几种国际化输出方式 国际化:国际化的本质,就是查找,替换.程序界面上输出的是国际化消息的 key 所对应的值.Struts2 中的国际化机制,会根据 key 到资源文件中找对应的文本来替换上面的k ...
- 【shell编程】1、shell编程简介
Shell本身是一个用C语言编写的程序,它是用户使用Unix/Linux的桥梁,用户的大部分工作都是通过Shell完成的.Shell既是一种命令语言,又是一种程序设计语言.作为命令语言,它交互式地解释 ...
- js判断数据类型的四种方法
1.typeof typeof是一个操作符,其右侧跟一个一元表达式,并返回这个表达式的数据类型.返回的结果用该类型的字符串(全小写字母)形式表示,包括number,string,boolean,und ...
- JS如何判断一个数组是否为空、是否含有某个值
一.js判断数组是否为空 方法一: arr.length let arr = []; if (arr.length == 0){ console.log("数组为空") }els ...
- 安卓开发之自定义一个view弹出框
https://www.cnblogs.com/muyuge/p/6152167.html