<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>
uniapp接入谷歌地图,混合原生代码开发
最新推荐文章于 2024-07-10 15:57:54 发布
关键词由CSDN通过智能技术生成