uniapp接入谷歌地图，混合原生代码开发

<template>
  <view>
    <view id="map"></view>
    <view :prop="msg" :change:prop="renderScript.calcRoute" class="sure-btn">导航</view>
    <view @click="renderScript.calcRoute" class="sure-btn">导航</view>
    <button @tap="changeMsgFn">点击修改options</button>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        msg: 'xxxsssssssss',
        value: 'xxxxxxxxxxx'
      }
    },
    onLoad() {
      console.log(this.haight)
    },
    methods: {
      // 触发service层 出入renderjs数据改变
      changeMsgFn() {
          //  修改msg 触发change
          this.msg = "msg的值变了"
      },
      initMaps(val) {
        console.log(val)
      }
    }
  }
</script>
<script module="renderScript" lang="renderjs">
	export default {
		data() {
			return {
				map: {},
        haight: null,
        oceanBeach: null,
        directionsService: null,
        directionsRenderer: null
			};
		},
		mounted() {
      this.init();
		},
		methods: {
      init() {
        if(typeof  window.google == 'function'){
          this.handleMap();
        } else {
          var script = document.createElement("script");
          script.src =
          	`https://maps.googleapis.com/maps/api/js?key=您的key&callback=initMap`;
          script.async = true;
          document.head.appendChild(script);
        }
        window.initMap = () => {
          this.handleMap();
        }
      },
			handleMap() {
				this.directionsService = new google.maps.DirectionsService();
				this.directionsRenderer = new google.maps.DirectionsRenderer();
				this.oceanBeach = new google.maps.LatLng(30.53772, 104.04538);
				navigator.geolocation.getCurrentPosition((position) => {
				  var pos = {
				      lat: position.coords.latitude,
				      lng: position.coords.longitude
				  };
				  this.haight = new google.maps.LatLng(+pos.lat, +pos.lng);
				  var mapOptions = {
				    zoom: 14,
				    center: this.haight
				  }
				  this.map = new google.maps.Map(document.getElementById('map'), mapOptions);
				  this.directionsRenderer.setMap(this.map);
				  new google.maps.Marker({
				    position: this.haight,
				    map: this.map,
				    title: "Hello World!",
				  });
				});
			},
      calcRoute(val) {
        console.log(val)
        this.$ownerInstance.callMethod('initMaps', {
            content: 'xsdsdsd'
        })
        console.log(this.value)
        return
        var request = {
            origin: this.haight,
            destination: this.oceanBeach,
            travelMode: 'DRIVING',
            // waypoints: [{
            //   location: "台灣電力股份有限公司訓練所高雄訓練中心"
            // }],1
            // optimizeWaypoints: true,
            drivingOptions: {
              departureTime: new Date(Date.now()),
              trafficModel: 'pessimistic'
            }
        };
        this.directionsService.route(request, (response, status) => {
          if (status == 'OK') {
            this.directionsRenderer.setDirections(response);
          }
        });
      }
		},
	};
</script>

<style>
  #map{
    height: 80vh;
  }
</style>