here is a picture with the problem。
我正在使用Vue.js来使用REST API,该API发送有关即将进行的公交车传输的数据。在上方的图片中,每个列表项都代表一个转乘,单击该地图应显示路线。 从小到大的切换是可以的,但是当我切换到较短的路线时,蓝色的线表示它显得模糊并且比正常的大]。当我放大/缩小时,问题消失了,它只是初始显示。
我在每个新请求之后都尝试过在地图对象上使用setZoom(int)
函数,但这没有用。这是Vue实例中的相关代码:
编辑2:为简单起见,我已经在纯JS中实现了它methods: { ... calcRoute() { const request = { origin: this.start, destination: this.end } this.directionsService.route(request, (result, status) => { if (status == 'OK') { this.directionsRenderer.setDirections(result); //this.map.setZoom(12); } }) } }, watch: { start: () => { if (this.end && this.start) { this.calcRoute(); } }, ... }
编辑:根据建议,我提供了一个正在运行的代码段。单击更改方向按钮以查看问题。
const transfers = [{ "id": 29, "date": "2020-02-12T08:00:00.000Z", "pick_up": "Sofia Airport, Terminal 1", "drop_off": "Stara Zagora", "driver": "СТ", "vehicle": 6264, }, { "id": 43, "date": "2020-02-13T08:30:00.000Z", "pick_up": "Sofia Terminal 1", "drop_off": "Boutique One Hotel Sofia", "driver": "СТ", "vehicle": 6264, }]; let map, directionsService, directionsRenderer; let selectedTrans = 0; window.addEventListener('load', function() { map = new google.maps.Map(document.getElementById("map"), { zoom: 7, center: { lat: 42.698334, lng: 23.319941 } }); directionsService = new google.maps.DirectionsService(); directionsRenderer = new google.maps.DirectionsRenderer(); directionsRenderer.setMap(map); calcRoute(); }); function calcRoute() { const start = transfers[selectedTrans].pick_up; const end= transfers[selectedTrans].drop_off; const request = { origin: start, destination: end, travelMode: 'DRIVING' }; directionsService.route(request, (result, status) => { if (status == 'OK') { directionsRenderer.setDirections(result); } }) } document.getElementById('changeDirectionsBtn').addEventListener('click', () => { selectedTrans = selectedTrans == 0 ? 1 : 0; calcRoute(); });
#map { height: 100%; } html, body { height: 100%; margin: 0; padding: 0; }
<button id="changeDirectionsBtn"> Change Directions </button> <div id="map"> </div> <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAyfT_amJBqn-wi4gF_C9aV5AOpGDlc0E4" defer></script>
这里是有问题的图片。我正在使用Vue.js来使用REST API,该API发送有关即将进行的公交车转让的数据。在上方的图片中,每个列表项都代表一个传输,单击时,......>
我有空的时候需要对此做进一步的调查...
文档中提到