nuxt项目使用高德地图教程

第一步 在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())
  }			

完成