Vue3引入高德地图js API 2.0
在Vue 3中引入高德地图JavaScript API 2.0,你可以通过以下步骤进行:
- 安装高德地图JavaScript API库(如果还没安装):
npm install @amap/amap-jsapi-loader
- 在你的Vue组件中,使用
amap-jsapi-loader
来异步加载高德地图API,并在加载完成后进行初始化。
<template>
<div id="map" style="width: 500px; height: 400px;"></div>
</template>
<script>
import { onMounted, ref } from 'vue';
import AMapLoader from '@amap/amap-jsapi-loader';
export default {
setup() {
const map = ref(null);
onMounted(() => {
AMapLoader.load({
key: '你的高德地图API密钥',
version: '2.0',
plugins: ['AMap.Geolocation', 'AMap.PlaceSearch', 'AMap.Scale'],
}).then((AMap) => {
map.value = new AMap.Map('map', {
zoom: 11,
center: [116.397428, 39.90923], // 初始化地图中心点
});
}).catch((e) => {
console.error(e);
});
});
return {
map,
};
},
};
</script>
在这个例子中,我们首先在<template>
中定义了一个用于显示地图的div
,并设置了其样式。在<script>
中,我们使用Vue 3的setup
函数和onMounted
生命周期钩子来确保地图在组件挂载后初始化。我们使用AMapLoader.load
来异步加载高德地图API,并在加载成功后创建一个地图实例。
请确保替换'你的高德地图API密钥'
为你自己的高德地图API密钥。如果你还没有高德地图API密钥,你需要先去高德地图开放平台申请。
评论已关闭