高德地图+nuxt3
- 这是写在页面中的
const map = ref();
onMounted(() => {
let map = new AMap.Map('map-content', {
zoom: 20,
center: [117.17, 31.52],
});
const marker = new AMap.Marker({
position: [117.17, 31.52],
map: map,
});
const icon = new AMap.Icon({
size: new AMap.Size(50, 50),
image: 'https://pic.mksucai.com/00/03/29/2b2223e7f4f362aa.webp',
imageOffset: new AMap.Pixel(0, 0),
imageSize: new AMap.Size(50, 50),
})
marker.setIcon(icon);
marker.setLabel({
content: 'XXX有限公司',
offset: new AMap.Pixel(-10, -20),
});
map.setFitView();
})
- nuxt.config.ts中需要加入高德地图的key
app: {
head: {
title: 'XXX网站',
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ name: 'format-detection', content: 'telephone=yes' },
],
link:[{ rel: 'icon', type: 'image/x-icon', href: '/logo.jpg' }],
script: [
{type:'text/javascript',src:"https://webapi.amap.com/maps?v=2.0&key=高德地图的key"},
]
},
},