uniapp 实现高德地图导航

效果图：

<template><view><view class="page-body"><view class="page-section page-section-gap"><map id="map" @markertap="bindTap" @controltap="bindControltap" :controls="controls"style="width: 100%;height: 100vh;" :markers="markers" :scale="15" :latitude="latitude":longitude="longitude"><cover-view @click="startNav">开始导航</cover-view></map></view></view></view>
</template><script>import { mapTool } from './mapTool.js'export default {data() {return {subNVue: '',subNVueShowDetail: '',msg: '',id: 0, // 使用 marker点击事件 需要填写idtitle: 'map',// longitude: 116.39742,  // 默认的是北京经纬度// latitude: 39.909,longitude:106.220885,  latitude: 29.590185,controls: [],markers: [{id: 'gyqy',latitude: '29.595587852178966',longitude: '106.22169495575275',title: '企业',iconPath: 'logo.png'}]}},onLoad() {this.getDeviceLocation()},onReady() {this.createMap() //地图创建在页面中需要在onReady调用},methods: {// 创建地图createMap() {let mapContext = uni.createMapContext('map')mapContext.$getAppMap().showUserLocation() //显示用户位置let screenWidth =  uni.getSystemInfoSync().screenWidthvar coefficient=screenWidth/750this.controls=[{id:"mapType",controlId:"mapType",position:{width: 72*coefficient,height: 72*coefficient,left: 658*coefficient,top:110*coefficient},iconPath:"./logo.png",clickable:true}]},// 获取设备位置getDeviceLocation() {plus.geolocation.getCurrentPosition(function(p){let longitude = p.coords.longitude let latitude = p.coords.latitudeconsole.log(`经度:${longitude} 纬度:${latitude}`)this.longitude = longitudethis.latitude = latitude}, function(e){console.log('Geolocation error: ' + e);},{"enableHighAccuracy":"true", // 是否高精确度获取位置信息"provider": "system"  // 优先使用的定位模块});},startNav() {// 这里需要使用的时wgs8坐标系即GPS定位 设置目标位置坐标点和开始位置坐标点var wgs84togcj02=mapTool.wgs84togcj02(this.longitude,this.latitude)// latitude: "29.59827298936982" ; longitude: "106.21791710134177"var dst = new plus.maps.Point(106.21791710134177,29.59827298936982);// 目的点  var src = new plus.maps.Point(wgs84togcj02[0],wgs84togcj02[1]); // 开始点// 调用系统地图显示 plus.maps.openSysMap( dst, "测试导航到你想去的地方", src );},bindControltap(e) {console.log(e)},bindTap(e) {console.log(e)},}}
</script><style></style>

原文链接：https://juejin.cn/post/6985149247591022623

uniapp 实现高德地图导航相关推荐

uniApp使用高德地图api
uniApp使用高德地图api 1,在自己项目中的/src/common/js中的weixin.js写入,没有就新建文件,(具体目录因自己项目而议) export const weixin = {/* ...
Android 起调第三方导航，百度地图，高德地图，腾讯地图。起调高德地图导航
主要工具类 /*** Created by meixi on 2018/6/29.* 使用第三方导航:高德.百度..........*/ public class AmapUtil {public s ...
react-native调起第三方高德地图导航URL解释
react-native调起第三方高德地图导航URL解释做react-native地图应用时,主要使用的是高德地图,所以在导航上也准备调起高德地图应用来完成导航功能,在高德地图API官网并没有发现高 ...
uniapp 打开高德地图或者百度地图进行导航
//打开第三方地图 export function openMap(latitude,longitude,name){let url = "";if (plus.os.name = ...
uniapp使用高德地图线路规划
地图终于实现了想要的功能准备高德地图提供了线路规划的接口,但是由于uniapp使用的是小程序的SDK,有些东西就会无法使用参考文档 SDK里面的东西都是小程序中的语法,比如wx.getLocat ...
高德地图导航和标注，通过调用高德APP实现呢
在调用高德地图APP提供坐标定位位置,若果是需要导航的话可以参考下面1,如果还想知道路线.周边.导航请调用标注来实现,标注包含导航功能. 1 导航(调用显示导航图) 一种是通过高德提供的SDK实现,另 ...
H5 百度高德地图导航
H5 实现高德百度地图导航可唤醒app 记住在引入高德地图 <script type="text/javascript" src="https://webap ...
uniapp做高德地图
这是在uniapp中集成高德地图,需要城市名字确定地图城市, 使用精准定位并且设为地图中心,在初始化地图的时候先不设置center,在下面得到精准定位之后 onComplete的参数data中的lng ...
关于升级高德地图导航9.5.0的问题 ‘com.amap.api:navi-3dmap:9.5.0_3dmap9.5.0‘
最近打开项目,发现高德有新版本更新,果断更新.哈哈哈哈.然而结果好像并没有这么简单.要是世界上什么事情这么简单就好了.年轻人.还是太年轻了啊. 然后更新完最新的依赖 /*高德地图远程依赖*/imple ...
uni-app接入高德地图SDK实现定位用户城市
参考文章:http://ask.dcloud.net.cn/article/35070 本文以高德微信小程序 SDK 为例,简述如何在 uni-app 中利用微信小程序第三方 SDK,实现 App 端 ...

uniapp 实现高德地图导航

uniapp 实现高德地图导航相关推荐

最新文章

热门文章