当前位置: 代码迷 >> 综合 >> uniapp 实现高德地图导航
  详细解决方案

uniapp 实现高德地图导航

热度:79   发布时间:2023-11-18 14:33:02.0

效果图:

 

<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