nuxt项目使用高德地图教程

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项目中创建一个高德地图的小案例了!

未经允许不得转载:小月博客 » nuxt项目使用高德地图教程
微信公众号
关注我们,每天及时接收最新的学习资料
12000人已关注
分享到:
赞(1) 打赏

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏