uniapp接入谷歌导航功能


<template><view class="content"><view @click="calcRoute">生成路线</view><view id="map" style="height: 100vh;"></view></view>
</template><script>import { Loader } from "@googlemaps/js-api-loader";const loader = new Loader({// google服务的KEYapiKey: 你的key,version: "weekly",libraries: ["places"]});let directionsRenderer = null;export default {data() {return {directionsService: null,haight: null,oceanBeach: null}},onLoad() {this.initMap();},methods: {initMap() {loader.load().then((google) => {this.directionsService = new google.maps.DirectionsService();directionsRenderer = new google.maps.DirectionsRenderer();this.haight = new google.maps.LatLng(25.0476133, 121.5174062);this.oceanBeach = new google.maps.LatLng(24.1631651, 120.6746691);let mapOptions = {zoom: 14,center: this.haight}var map = new google.maps.Map(document.getElementById('map'), mapOptions);directionsRenderer.setMap(map);console.log(directionsRenderer)}).catch((e) => {console.log(e)})},calcRoute() {var request = {origin: this.haight,destination: this.oceanBeach,travelMode: 'DRIVING',waypoints: [{location: "台灣電力股份有限公司訓練所高雄訓練中心"}],optimizeWaypoints: true,drivingOptions: {departureTime: new Date(Date.now()),trafficModel: 'pessimistic'}};this.directionsService.route(request, function(response, status) {if (status == 'OK') {directionsRenderer.setDirections(response);}});}}}
</script><style>.content{width: 100%;height: 100vh;}#map{height: 100%;}</style>

uniapp接入谷歌导航功能相关推荐

Android接入谷歌广告 - 发现各种坑
先前接入谷歌广告Admob,功能完成后AS能运行,打包哩不行一直报 com.android.build.api.transform.TransformException: java.util.zip. ...
django+vue+nginx+frp搭建漫画网站之接入谷歌统计和百度统计（三）
地址:http://www.iewoai.com/ 1.背景书接上文,打算监控网站的流量等访问情况,一开始打算用matomo,但是看了视频后发现直接接入谷歌统计和百度统计是一种更方便省事的手段.(那 ...
【uniApp 接入萤石云】
uniApp 接入萤石云小记 vue页面 html页面 uniApp 不支持直接接入萤石云相关的 ezuikit.js 所以要用其uniApp支持的 web-view 属性 vue页面 <t ...
uniapp接入友盟（全网唯一很全！！！）
uniapp接入友盟以及埋点监控 1.首先进入友盟官网,注册账号 => 友盟官网 2.点击产品 => 小程序统计U-Mini ,进入控制台 3.在应用列表里面可以看见之前创建的应用,点击添 ...
uniapp接入微信客服聊天流程（企业微信）
1.注册并认证企业微信多平台开发企业微信客服是最好的解决方案企业微信 2.打开微信客服 3.启用微信客服,并添加客服账号 4.接入场景如果多平台开发可以都接入里面有步骤,按照步骤走即可(看完官 ...
uni-app接入阿里图标使用以及图标旋转
uni-app接入阿里图标使用以及图标旋转阿里图标官网创建账号及项目阿里矢量图标库将需要的图标添加到购物车,添加到自己的项目点击"Download Code"下载项目代码 ...
接入谷歌AdSense后浏览器控制台报错：Failed to load resource: the server responded with a status of 403的原因及解决办法、
本篇文章主要讲解,接入谷歌AdSense后浏览器控制台报错:Failed to load resource: the server responded with a status of 403 ads ...
接入谷歌支付4.0（Kotlin）
前言很多游戏研发同学可能都需要顺带接入谷歌支付,谷歌的文档大家都懂得,有时候感觉看下来好像抓住了什么却又什么都没有抓住,导致接入工作有时候会陷入瓶颈.我整理了下谷歌支付接口,并添加了一些解释性文本及 ...
uni-app 接入银联H5支付（Java）思路代码
uni-app 接入银联H5支付(Java)思路代码 uni-app-web-view Java(后台部分代码)可以参考官方的Demo取代码银联文档地址: H5支付. 第一次接触银联支付的话建议跑 ...

uniapp接入谷歌导航功能

uniapp接入谷歌导航功能相关推荐

最新文章

热门文章