首页vue+vite+ts引用Maps JavaScript API

vue+vite+ts引用Maps JavaScript API

时间: 2023-09-03 22:10:56 浏览: 248

vue3+vite+ts环境搭建步骤

5星 · 资源好评率100%

vue3+vite+ts环境搭建步骤

对于Vue + Vite项目引用Maps JavaScript API，你可以按照以下步骤进行操作： 1. 在项目根目录下安装相关依赖： ```bash npm install @types/googlemaps ``` 2. 在`index.html`文件中添加Maps JavaScript API的脚本引用。你需要在`<head>`标签内添加以下代码： ```html <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places"></script> ``` 请将`YOUR_API_KEY`替换为你自己的Google Maps API密钥。 3. 在Vue组件中，可以通过在`setup()`函数内引入Maps JavaScript API，并在需要使用的地方调用相关函数。以下是一个示例： ```vue <template> <div id="map"></div> </template> <script setup lang="ts"> import { onMounted } from 'vue'; onMounted(() => { const map = new google.maps.Map(document.getElementById('map'), { center: { lat: -34.397, lng: 150.644 }, zoom: 8, }); }); </script> ``` 在上面的示例中，我们在组件的`setup()`函数中使用`onMounted()`钩子，确保地图只在组件挂载后初始化。然后，我们创建了一个新的`google.maps.Map`实例，并将其绑定到具有`id="map"`的DOM元素上。记得在其他地方使用Maps JavaScript API时，也要在相应的代码块内引入`google.maps`对象。希望以上信息能帮助到你！如有任何疑问，请随时追问。

阅读全文