vue nuxt项目使用高德地图教程

今天记录一下如何在nuxt项目中使用高德地图的步骤， 下面是详细的使用教程。

Nuxt.js官网： https://www.nuxtjs.cn/

高德地图：https://lbs.amap.com/

第1步：获取高德地图 key

注册高德地图–> 控制台—>应用管理—>创建新应用：（如图所示）

新建完成后就可以得到一个key，下面会用到

第2步：在nuxt.conig.js中创建script标签，引入地图组件

script: [
      {
        type: 'text/javascript',
        src:
          'https://webapi.amap.com/maps?v=1.4.15&key=填写自己创建的key*****&plugin=AMap.MouseTool,AMap.PolyEditor,AMap.LabelMarker,AMap.Autocomplete,AMap.ToolBar,AMap.PlaceSearch,AMap.Heatmap,AMap.Geocoder'
      },
    ],

第3步： 在页面中创建地图容器标签

<div class="map" id="container"></div>

注意： 这里要特别注意一下容器css的样式问题, 我这里采用的是vh的写法

#container {
  width: 100%;
  height: calc(100vh - 100px);
}

第4步： 创建数据对象

export default {
  mounted(){
    this.createMap()
  },
  methods: {
    createMap () {
      var map = new window.AMap.Map('container', {
        resizeEnable: true, 
        zoom:11,
        center: [116.397428, 39.90923] 
      });
    }
  },
}

完成以上步骤就可以在nuxt项目中创建一个高德地图的小案例了！