欢迎来到尧图网

客户服务 关于我们

您的位置:首页 > 教育 > 高考 > uniApp 加载google地图 并规划路线

uniApp 加载google地图 并规划路线

2025/4/30 18:45:46 来源:https://blog.csdn.net/weixin_43849636/article/details/143135798  浏览:    关键词:uniApp 加载google地图 并规划路线

uniApp 加载google地图 并规划路线

  • 备注:
  • 核心代码
  • 实例

备注:

打开谷歌地图失败的话 参考google开发文档

https://developers.google.com/maps/documentation/urls/ios-urlscheme?hl=zh-cn#swift

核心代码

mounted() {this.loadGoogleMapsScript();
},
methods: {//加载loadGoogleMapsScript() {const script = document.createElement('script');script.src ='https://maps.googleapis.com/maps/api/js?key=你自己的Key';script.async = true;script.defer = true;window.initMap = this.initMap; // 将 initMap 方法绑定到全局作用域document.head.appendChild(script);},//初始化initMap() {//获取当前的定位   经纬度navigator.geolocation.getCurrentPosition(position => {const {latitude,longitude} = position.coords;console.log("pos", position);const pos = {lat: latitude,lng: longitude};//加载到地图this.map = new google.maps.Map(document.getElementById('map'), {center: {lat: latitude,lng: longitude},zoom: 8,});// this.map = new google.maps.Map(document.getElementById('map'), {// 	center: {// 		lat: -34.397,// 		lng: 150.644// 	},// 	zoom: 8,// });// 设置起点和终点const start = new google.maps.LatLng(latitude, longitude);console.log(latitude, longitude);console.log(latitude + 1, longitude + 1);const end = new google.maps.LatLng(latitude + 1, longitude + 1);// 创建方向服务和方向渲染器实例const service = new google.maps.DirectionsService();const renderer = new google.maps.DirectionsRenderer({map: this.map});renderer.setMap(map);// 计算路径并在地图上显示service.route({origin: start,destination: end,travelMode: 'DRIVING', // 可选值:'DRIVING'(驾驶)、'WALKING'(步行)、'BICYCLING'(骑行)、'TRANSIT'(公共交通)}, (response, status) => {if (status === 'OK') {renderer.setDirections(response);} else {console.error('Directions request failed!');}});});},
},

实例

在这里插入图片描述

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

热搜词