uniapp接入谷歌导航功能

最新推荐文章于 2024-01-13 13:44:04 发布

它经不起推敲的

最新推荐文章于 2024-01-13 13:44:04 发布

阅读量439

点赞数 1

分类专栏：笔记文章标签： javascript

本文链接：https://blog.csdn.net/m0_46365130/article/details/127822308

版权

笔记专栏收录该内容

63 篇文章 1 订阅

订阅专栏


<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服务的KEY
  	apiKey: 你的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>