H5页面调起地图导航

h5页面拉起地图导航

• 新年快乐，在此㊗️大家万事如意，牛气冲天！

这里再次记录下，在vue中使用百度地图，点击marker弹窗选择对应导航方式。

文章目录

h5页面拉起地图导航
- 效果图
- 拉起导航方式
- - 1. 高德地图
  - 2. 百度地图
  - 3. 腾讯地图
  - - 方式二
- vue使用百度地图
- - template
  - script
  - style

百度api文档

效果图

拉起导航方式

1. 高德地图

调用方式

http://uri.amap.com/marker?position=lng,lat&name=address&coordinate=gaode&callnative=1

说明：
- 其中position、name分别是经纬度和详情地址参数
api请查看

2. 百度地图

调用方式

http://api.map.baidu.com/marker?location=纬度,经度&title=所在位置名称&content=所在位置的简介&output=html

说明：
- 其中location、title、content分别是经纬度、标注点显示标题及标注点显示内容，output为指定输出类型，web上必须指定。
- ios设备当切换底部tab时，会弹窗提示可能离开微信，打开第三方应用，根据需要操作即可。
api请查看

3. 腾讯地图

调用方式

http://apis.map.qq.com/uri/v1/marker?marker=coord:lat,lng;addr:address

说明：
- 其中coord、addr分别是经纬度和详情地址参数
- 当用户没有安装腾讯地图APP应用时，点击时会直接跳转到浏览器提供下载。
api请查看

方式二

 <a href="https://apis.map.qq.com/uri/v1/geocoder?coord=22.558786,114.057934&amp;referer=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77" style="text-decoration:none;margin-top: 40px;" target="_blank"><div style="width:98%; background: #2134ae; padding:8px 0px; color:#FFFFFF; border-radius:5px; text-align:center;margin-left: 1%;">导航</div></a>

vue使用百度地图

安装

npm install vue-baidu-map --save

使用

这里使用局部注册组件

template

<div class='mapWrap page'><baidu-map class="bm-view" ak="YOUR_APP_KEY" style="width: 100%; height: 100%":center="{lng, lat}" :zoom="15" :scroll-wheel-zoom="true"><bm-marker @click="show = true" :position="{lng, lat}" animation="BMAP_ANIMATION_BOUNCE"><bm-label :content="baseName" :labelStyle="{color: 'red', fontSize : '12px', borderRadius: '4px'}" :offset="{width: -35, height: 30}"/></bm-marker><bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="true" :autoLocation="true" :locationIcon="icon"></bm-geolocation></baidu-map><!-- mask自行写样式 --><div class="content"><ul><!-- 这里可根据需求添加其他导航方式 --><li><a :href="autoNaviUrl">高德地图</a></li></ul></div>
</div>

script

<script>import BaiduMap from 'vue-baidu-map/components/map/Map.vue'import BmMarker from 'vue-baidu-map/components/overlays/Marker'import BmLabel from 'vue-baidu-map/components/overlays/Label'    import BmGeolocation from 'vue-baidu-map/components/controls/Geolocation'export default {name: "Map",data() {return {lng: 116.404,lat: lat: 39.915,baseName: '北京天安门',icon: {url: require('../../assets/images/icon/location_3.png'),size: {width: 40, height: 40},opts: {anchor: {width: 27, height:13}}},show: false,autoNaviUrl: ''};},components: {BaiduMap,BmMarker,BmGeolocation,BmLabel},created() {// 高德地图this.autoNaviUrl = `https://uri.amap.com/marker?position=${this.lng},${this.lat}&name=${this.baseName}`;},};
</script>

style

// 隐藏logo
<style>.BMap_cpyCtrl,.anchorBL {display: none;}
</style>

H5页面调起地图导航相关推荐

web页面调起地图APP(高德地图、百度地图、腾讯地图)
web页面调起地图APP(高德地图.百度地图.腾讯地图) 在没有安装APP的情况下可以用web端地图以路线规划为例: 一.腾讯地图 web端官方文档地址:https://lbs.qq.com/we ...
微信h5页面调用第三方位置导航
微信h5页面拉起第三方导航应用需要准备的: 通过微信认证的公众号有备案过的域名背景:微信公众号点击菜单栏跳到h5页面,需要用到导航功能需求:当用户点击导航按钮时,跳转到第三方app进行导航参 ...
Android 起调第三方导航，百度地图，高德地图，腾讯地图。起调高德地图导航
主要工具类 /*** Created by meixi on 2018/6/29.* 使用第三方导航:高德.百度..........*/ public class AmapUtil {public s ...
微信H5页面嵌入百度地图---解决手机的webKit定位，ios系统对非https网站不提供支持问题
微信H5页面嵌入百度地图---解决手机的webKit定位,ios系统对非https网站不提供支持问题参考文章: (1)微信H5页面嵌入百度地图---解决手机的webKit定位,ios系统对非http ...
前端如何在H5页面调起微信支付
在微信服务号开发的时候经常会遇到微信支付的功能实现,通过实际经验自己总结了一下,前端在H5页面调起微信支付有两种办法,一是利用内置对象,二是通过引用微信的js sdk,亲测都能支付成功,从写法上来看用 ...
H5页面唤醒高德地图|百度地图App
H5页面唤醒高德地图|百度地图App 移动端H5页面唤醒app,若唤醒失败则跳转到应用商城下载. 唤醒前需要检测当前操作系统,不同的操作系统用不同的协议我这里的需求是唤醒失败就跳转到网页版的地图,若 ...
关于app内嵌h5页面调用百度地图定位问题，为什么定位不准呢？
关于app内嵌h5页面调用百度地图定位问题,为什么定位不准呢?以下为代码. 百度地图:里面有3种定位方式(a:浏览器定位,b:IP定位,c:定位SDK辅助定位),我选择第3种,是需要app那块添加些什 ...
移动端h5页面打开高德地图或者百度地图实现导航
需求场景:用户会收到一条短信,短信带着链接,点击链接跳转h5页面,h5页面实现跳转地图并实现导航. 方法:1.a标签直接打开地图,地图在浏览器支持跳转. 高德: <a href="ht ...
android webview 百度地图,APP内的网页怎么调起地图导航服务
高德地图和百度地图可以用scheme调起地图,具体可参考API,里面讲的很清楚,配置好相应的Schema之后根据例子使用就好了. 百度:http://lbsyun.baidu.com/index... ...

H5页面调起地图导航

h5页面拉起地图导航

文章目录

效果图

拉起导航方式

1. 高德地图

2. 百度地图

3. 腾讯地图

方式二

vue使用百度地图

template

script

style

H5页面调起地图导航相关推荐

最新文章

热门文章