nuxt3 引入高德地图

jjww-135

已于 2022-12-06 15:55:57 修改

阅读量1.1k

点赞数 1

文章标签：前端 javascript html

于 2022-12-06 15:23:10 首次发布

本文链接：https://blog.csdn.net/weixin_38838199/article/details/128203582

版权

1、nuxt.conig.ts中创建script标签，引入地图组件

script: [
    {
        type: 'text/javascript',
        src:'https://webapi.amap.com/maps?v=2.0&key=*********&plugin=AMap.Geolocation,AMap.Geocoder',
    }
]

2、页面中使用高德地图

<template>
  <div id="map-box"></div>
</template>
  
<script setup lang="ts">
import "@amap/amap-jsapi-types";
// 地图对象
const map = shallowRef<AMap.Map>()

// 加载地图文件
onMounted(() => {
  map.value = new AMap.Map('map-box',{
    zoom: 11,
    center: [116.397428, 39.90923]
  });

  map.value.on('complete', async () => {
   // TODO
  })
})
</script>
  
<style scoped>
#map-box {
  width: 100%;
  height: 700px;
}
</style>