Google 路线 API - 新请求后路线模糊
Google Directions API - Route is blurred after a new request
here is a picture with the problem.
我正在使用 Vue.js 来使用 REST API 来发送有关即将到来的总线传输的数据。在上面的图片中,每个列表项代表一个转移,当点击时,地图应该显示路线。 当从小到大切换时没问题,但当我切换到较短的路线时,指示它的蓝线显得模糊并且比正常大。当我缩放 in/out 时问题消失了,它只是初始显示。
我在每次新请求后都在地图对象上尝试了 setZoom(int) 函数,但是没有用。
下面是 Vue 实例的相关代码:
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();
}
},
...
}
编辑:按照建议,我提供了一个 运行 代码片段。单击更改方向按钮查看问题。
编辑 2:为了简单起见,我用纯 JS 实现了它
编辑 3:提供您的 API KEY
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=YOUR_API_KEY" defer></script>
有空的时候我需要进一步调查一下...
文档提到
Because the renderer is an MVCObject, it will automatically detect any changes to its properties and update the map when its associated directions have changed.
我不确定这到底是什么意思。
也就是说,只需在计算新路由之前调用 directionsRenderer.setMap(null);
并在回调中调用 directionsRenderer.setMap(map);
即可解决问题。请参阅下面的代码段。
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();
calcRoute();
});
function calcRoute() {
directionsRenderer.setMap(null);
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);
directionsRenderer.setMap(map);
}
})
}
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=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk" defer></script>
here is a picture with the problem.
我正在使用 Vue.js 来使用 REST API 来发送有关即将到来的总线传输的数据。在上面的图片中,每个列表项代表一个转移,当点击时,地图应该显示路线。 当从小到大切换时没问题,但当我切换到较短的路线时,指示它的蓝线显得模糊并且比正常大。当我缩放 in/out 时问题消失了,它只是初始显示。
我在每次新请求后都在地图对象上尝试了 setZoom(int) 函数,但是没有用。
下面是 Vue 实例的相关代码:
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();
}
},
...
}
编辑:按照建议,我提供了一个 运行 代码片段。单击更改方向按钮查看问题。
编辑 2:为了简单起见,我用纯 JS 实现了它
编辑 3:提供您的 API KEY
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=YOUR_API_KEY" defer></script>
有空的时候我需要进一步调查一下...
文档提到
Because the renderer is an MVCObject, it will automatically detect any changes to its properties and update the map when its associated directions have changed.
我不确定这到底是什么意思。
也就是说,只需在计算新路由之前调用 directionsRenderer.setMap(null);
并在回调中调用 directionsRenderer.setMap(map);
即可解决问题。请参阅下面的代码段。
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();
calcRoute();
});
function calcRoute() {
directionsRenderer.setMap(null);
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);
directionsRenderer.setMap(map);
}
})
}
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=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk" defer></script>