网站推广怎么做比较好,网站开发 平面设计,dw不用代码做网页,爱企查 免费项目中用到的一个功能是要通过点击地址来实现打开地图app实现地址导航。如下图#xff1a;实现思路就是在H5页面内通过点击marker图标然后进行当前位置与页面上地址的路程规划与导航。由于项目中用到的是高德地图#xff0c;所以这里用到的是调起高德地图APP来实现该功能。首…项目中用到的一个功能是要通过点击地址来实现打开地图app实现地址导航。如下图实现思路就是在H5页面内通过点击marker图标然后进行当前位置与页面上地址的路程规划与导航。由于项目中用到的是高德地图所以这里用到的是调起高德地图APP来实现该功能。首先肯定要去高德开放平台去申请KEY拿到这个KEY后通过调用js代码就可以实现该功能。之前在H5页面中无论是做导航还是定位一般我都是采用marker进行选点操作的JSAPI中提供的一系列的方法可以很轻松的实现该功能该功能实现过程我用的php语言进行配合操作版本为TP5首先我通过点击上个页面中的marker图标跳转到控制器在控制器接收该地址通过PHP方法获取该地址的经纬度这个实现过程我就不贴图展示了获取到经纬度后我通过赋值渲染到html页面后代码如下body,#mapContainer{margin:0;height:100%;width:100%;font-size:12px;}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.displaynone;}}其中 有两个处代码需要改变成变量一个是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版权申明本站文章部分自网络如有侵权请联系west999comoutlook.com特别注意本站所有转载文章言论不代表本站观点本站所提供的摄影照片插画设计作品如需使用请与原作者联系版权归原作者所有
