【发布时间】:2019-12-21 10:27:08
【问题描述】:
我在 HERE API 的路由服务中遇到了一些奇怪且非常令人沮丧的问题。直到昨天它都工作得很好,但是当我今天测试它时,它一开始什么也没显示,然后我在控制台中收到以下消息:
还有两个错误:
从源“http://localhost:3001”访问位于“https://route.ls.hereapi.com/routing/7.2/calculateroute.json?xnlp=CL_JSMv3.1.9.0&apikey=Y94bXc6tWL5xKdfNAMuKVFYyixiGECdBdQozM_IFxLg&mode=fastest%3Bcar&waypoint0=geo!53.551084599999996%2C9.9936818&waypoint1=geo!42.14731201935119%2C24.73156194202602&representation=display&routeAttributes=summary”的 XMLHttpRequest 已被 CORS 策略阻止:请求的资源上不存在“Access-Control-Allow-Origin”标头。
我不知道是什么导致了这些错误。我尝试了以前版本的代码,我 100% 确定它工作正常,但现在它也在那里失败了。
与路由相关的代码:
showRoute() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(this.displayLocationInfo, () => {
this.$swal({ icon: 'warning', text: 'Моля разрешете достъп до данните за локация!' })
}, { enableHighAccuracy: true });
}
},
displayLocationInfo(position) {
const lng = position.coords.longitude;
const lat = position.coords.latitude;
this.$store.dispatch('setStartWaypoint', `geo!${lat},${lng}`)
if (!this.$store.getters.getRoutingParameters['waypoint1']) {
return this.$swal({ icon: 'warning', text: 'Моля изберете офис!' })
}
const routingParameters = this.$store.getters.getRoutingParameters
const router = this.platform.getRoutingService();
router.calculateRoute(routingParameters, this.onResult,
function(error) {
console.log(error.message);
});
},
onResult(result) {
if (Object.keys(this.map.getObjects()).length > 0) {
for (let object of this.map.getObjects()){
if (object.id === 'route'){
this.map.removeObject(object);
}
}
}
var route,
routeShape,
startPoint,
endPoint,
linestring;
if(result.response.route) {
route = result.response.route[0];
routeShape = route.shape;
linestring = new H.geo.LineString();
if (route.summary.distance < 1000) {
this.distance = route.summary.distance + ' м'
} else {
this.distance = (route.summary.distance / 1000).toFixed(2) + ' км'
}
routeShape.forEach(function(point) {
const parts = point.split(',');
linestring.pushLatLngAlt(parts[0], parts[1]);
});
startPoint = route.waypoint[0].mappedPosition;
endPoint = route.waypoint[1].mappedPosition;
const routeOutline = new H.map.Polyline(linestring, {
style: {
lineWidth: 6,
strokeColor: 'rgba(8, 48, 69, 0.5)',
lineTailCap: 'arrow-tail',
lineHeadCap: 'arrow-head'
}
});
const routeArrows = new H.map.Polyline(linestring, {
style: {
lineWidth: 6,
fillColor: 'white',
strokeColor: 'rgba(255,255,255,1)',
lineDash: [0, 2],
lineTailCap: 'arrow-tail',
lineHeadCap: 'arrow-head'
}
});
const routeLine = new H.map.Group();
routeLine.id = 'route'
routeLine.addObjects([routeOutline, routeArrows]);
const startMarkerIcon = new H.map.Icon(require('../assets/marker.svg'), {
size: {
w: 42,
h: 60
}
})
const startMarker = new H.map.Marker({
lat: startPoint.latitude,
lng: startPoint.longitude
}, { icon: startMarkerIcon });
const endMarker = new H.map.Circle({
lat: endPoint.latitude,
lng: endPoint.longitude
}, 6);
endMarker.setStyle({
strokeColor: 'white',
fillColor: 'rgba(8, 48, 69, 0.5)',
lineWidth: 2
})
startMarker.id = 'route'
endMarker.id = 'route'
this.map.addObjects([routeLine, startMarker, endMarker]);
this.map.getViewModel().setLookAtData({bounds: routeLine.getBoundingBox()});
}
},
【问题讨论】:
-
直到昨天你的 API 密钥是有效的,你检查它的过期日期/时间了吗?
-
仍然有效
标签: javascript vue.js maps here-api