使用Vue 3 + typescript + vite。
已经用Vite + Vue 3 +typescript搭建了项目。
使用谷歌地图时遇到麻烦,因为它需要付费。
然后尝试了 Mapbox,地图部分工作正常,但在添加 MapboxGeocoder 时显示错误。
出现此错误
TypeError: EventEmitter is not a constructor
at new MapboxGeocoder (index.js:74)
at temp.vue:30
at callWithErrorHandling (runtime-core.esm-bundler.js:6668)
at callWithAsyncErrorHandling (runtime-core.esm-bundler.js:6677)
at Array.hook.__weh.hook.__weh (runtime-core.esm-bundler.js:1931)
at flushPostFlushCbs (runtime-core.esm-bundler.js:6869)
at render2 (runtime-core.esm-bundler.js:4807)
at mount (runtime-core.esm-bundler.js:3140)
at Object.app.mount (runtime-dom.esm-bundler.js:1572)
at main.ts:16
如何解决这个错误。需要帮忙。
代码块
<script setup lang="ts">
import mapboxgl from "mapbox-gl";
import MapboxGeocoder from "@mapbox/mapbox-gl-geocoder";
import "@mapbox/mapbox-gl-geocoder/dist/mapbox-gl-geocoder.css";
onMounted(() => {
try {
mapboxgl.accessToken =
"TOKEN";
const map = new mapboxgl.Map({
container: "map", // container ID
style: "mapbox://styles/mapbox/streets-v11", // style URL
center: [-74.5, 40], // starting position [lng, lat]
zoom: 9, // starting zoom
});
map.addControl(
new MapboxGeocoder({
accessToken: mapboxgl.accessToken,
})
);
} catch (error) {
console.log("Error on mapbox creation: ", error);
}
});
</script>
我在使用 vanilla JS 和 vite 时遇到了非常相似的问题。
深入研究 vite 的问题我发现了这个:https://github.com/vitejs/vite/issues/2694#issuecomment-826195660这对我有用。也许更有知识的人能够准确解释正在发生的事情。我猜想需要在 mapbox-gl、vite 或两者中解决一些错误。
无论如何,我做了:
npm i events
npm i --save-dev @types/events @types/node
现在它正在发挥作用!希望它也对你有用。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)