nuxt项目使用高德地图教程

最新推荐文章于 2025-06-16 18:38:11 发布

图解前端

最新推荐文章于 2025-06-16 18:38:11 发布

阅读量5.5k

点赞数 2

CC 4.0 BY-SA版权

分类专栏：前端 vue 文章标签： nuxtjs 地图

本文链接：https://blog.youkuaiyun.com/webofrxy/article/details/79539175

前端同时被 2 个专栏收录

22 篇文章

订阅专栏

vue

10 篇文章

订阅专栏

本文介绍如何在Nuxt.js项目中集成高德地图API并实现地图展示、标记位置及绘制圆形区域等功能。首先在nuxt.config.js文件中引入地图组件，接着在页面创建地图标签，最后通过JavaScript代码加载地图并进行相关操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

 script:[
      {src:"http://webapi.amap.com/maps?v=1.4.4&key=*******"},
  ]

第二步在页面中创建地图标签

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

第三步创建地图对象

    mounted(){
                    this.loadmap();     //加载地图和相关组件
	},
	methods:{
		loadmap(){
			const map = new window.AMap.Map('container',{
			zoom:20,
			center: [121.200675,31.177504]
		})
		var marker = new AMap.Marker({
		    position: [121.200675,31.177504]
		});
		marker.setMap(map);
		var circle = new AMap.Circle({
		    center: [120.200675,30.177504],
		    radius: 100,
		    fillOpacity:0.2,
		    strokeWeight:1
				})
		   circle.setMap(map);
		    map.setFitView()
                  //设置介绍信息
 		    var info = new AMap.InfoWindow({
		             content:"我是介绍内容",
		          offset:new AMap.Pixel(0,-28)
		})
		info.open(map,marker.getPosition())
  }