使用来自 npm 的 Google 地图 JavaScript API 绘制方向
Drawing a Direction using the Google Maps JavaScript API from npm
第一个 Javascript 几年的代码,我尝试加载 Google 地图 Javascript API npm 包尝试加载地图并绘制两点之间的方向(里尔和比亚里茨,经过巴黎和波尔多)。我以来自 Google API 的错误结束,代码是 UNKNOWN_ERROR,消息是
A directions request could not be processed due to a server error. The
request may succeed if you try again.
不幸的是,我在过去的 48 小时内尝试了几次都没有成功。
config.js
export const API_KEY = 'XXXXXX___A_VALID_GOOGLE_API_KEY_HERE_XXXXXXX'
// the key has access to Directions API & Maps JavaScript API
index.js
import { API_KEY } from './config.js';
import { Loader } from '@googlemaps/js-api-loader';
//////////////////////
// Direction API Test
//////////////////////
const calculateAndDisplayRoute = async function (
directionsService,
directionsRenderer
) {
try {
const google = window.google; // Fix for ESLint Err google is not defined
const res = await directionsService.route({
origin: {
query: 'Lille',
},
destination: {
query: 'Biarritz',
},
waypoints: [
{ location: 'Paris, France' },
{ location: 'Bordeaux, France' },
],
travelMode: google.maps.TravelMode.DRIVING,
avoidTolls: true,
avoidHighways: false,
drivingOptions: {
departureTime: new Date(Date.now()),
trafficModel: 'pessimistic',
},
});
console.log(res);
directionsRenderer.setDirections(res);
} catch (e) {
console.log(`Directions request failed
Code: ${e.code}
Message: ${e.message} `);
}
};
////////////
// API Load
////////////
const init = async function () {
try {
const loader = new Loader({
apiKey: API_KEY,
version: 'weekly',
});
const res = await loader.load();
if (!res) return;
const google = window.google; // Fix for ESLint Err google is not defined
const directionsService = new google.maps.DirectionsService();
const directionsRenderer = new google.maps.DirectionsRenderer();
const map = new google.maps.Map(document.getElementById('map'), {
zoom: 6,
center: { lat: 47, lng: 2 },
});
directionsRenderer.setMap(map);
document
.getElementById('go')
.addEventListener(
'click',
calculateAndDisplayRoute.bind(
this,
directionsService,
directionsRenderer
)
);
} catch (e) {
console.error(e);
}
};
init();
但是,我遇到了这个奇怪的错误,我不知道如何解决它:/
Directions request failed
Code: UNKNOWN_ERROR
Message: DIRECTIONS_ROUTE: UNKNOWN_ERROR:
A directions request could not be processed due to a server error.
The request may succeed if you try again.
最终,问题出现在打包程序方面,即 Parcel。我已经构建了这段代码的 SvelteKit 版本,它的工作原理非常棒。由于 SwelteKit 使用 Rollup 作为打包器(和 Vite),我想这只是写作时的方式。
第一个 Javascript 几年的代码,我尝试加载 Google 地图 Javascript API npm 包尝试加载地图并绘制两点之间的方向(里尔和比亚里茨,经过巴黎和波尔多)。我以来自 Google API 的错误结束,代码是 UNKNOWN_ERROR,消息是
A directions request could not be processed due to a server error. The request may succeed if you try again.
不幸的是,我在过去的 48 小时内尝试了几次都没有成功。
config.js
export const API_KEY = 'XXXXXX___A_VALID_GOOGLE_API_KEY_HERE_XXXXXXX'
// the key has access to Directions API & Maps JavaScript API
index.js
import { API_KEY } from './config.js';
import { Loader } from '@googlemaps/js-api-loader';
//////////////////////
// Direction API Test
//////////////////////
const calculateAndDisplayRoute = async function (
directionsService,
directionsRenderer
) {
try {
const google = window.google; // Fix for ESLint Err google is not defined
const res = await directionsService.route({
origin: {
query: 'Lille',
},
destination: {
query: 'Biarritz',
},
waypoints: [
{ location: 'Paris, France' },
{ location: 'Bordeaux, France' },
],
travelMode: google.maps.TravelMode.DRIVING,
avoidTolls: true,
avoidHighways: false,
drivingOptions: {
departureTime: new Date(Date.now()),
trafficModel: 'pessimistic',
},
});
console.log(res);
directionsRenderer.setDirections(res);
} catch (e) {
console.log(`Directions request failed
Code: ${e.code}
Message: ${e.message} `);
}
};
////////////
// API Load
////////////
const init = async function () {
try {
const loader = new Loader({
apiKey: API_KEY,
version: 'weekly',
});
const res = await loader.load();
if (!res) return;
const google = window.google; // Fix for ESLint Err google is not defined
const directionsService = new google.maps.DirectionsService();
const directionsRenderer = new google.maps.DirectionsRenderer();
const map = new google.maps.Map(document.getElementById('map'), {
zoom: 6,
center: { lat: 47, lng: 2 },
});
directionsRenderer.setMap(map);
document
.getElementById('go')
.addEventListener(
'click',
calculateAndDisplayRoute.bind(
this,
directionsService,
directionsRenderer
)
);
} catch (e) {
console.error(e);
}
};
init();
但是,我遇到了这个奇怪的错误,我不知道如何解决它:/
Directions request failed
Code: UNKNOWN_ERROR
Message: DIRECTIONS_ROUTE: UNKNOWN_ERROR:
A directions request could not be processed due to a server error.
The request may succeed if you try again.
最终,问题出现在打包程序方面,即 Parcel。我已经构建了这段代码的 SvelteKit 版本,它的工作原理非常棒。由于 SwelteKit 使用 Rollup 作为打包器(和 Vite),我想这只是写作时的方式。