nuxt 프로젝트 사용 고 덕 지도 튜 토리 얼

1080 단어 전단vue
첫 번 째 단 계 는 nuxt. conig. js 에서 script 라벨 을 만 들 고 지도 구성 요 소 를 도입 합 니 다.
 script:[
      {src:"http://webapi.amap.com/maps?v=1.4.4&key=*******"},
  ]

두 번 째 단 계 는 페이지 에 지도 탭 을 만 듭 니 다.

    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())
  }			

완성 하 다.

좋은 웹페이지 즐겨찾기