第一步：在index.html 引入

 <script src="https://webapi.amap.com/maps?v=2.0&key=你的key"></script>

第二步：在你需要地圖的時(shí)候 放入

<template>
	<div style="width: 200px; height: 200px">
		<div id="container"></div>
	</div>
</template>

<script>

export default {
	data() {
		return {
			map: '',
			zoom: 9,
			markers: [],
			markers1: [],
			center: [121.47, 31.23]
		};
	},
	mounted() {
		this.map = new AMap.Map('container', {
			viewMode: '2D',
			zoom: this.zoom,
			center: this.center,
			mapStyle: 'amap://styles/blue'
		});
		this.map.on('zoomchange', this.mapZoom);
        this.markerAllhl()
	},
	methods: {
		mapZoom() {
			this.zoom = parseInt(this.map.getZoom()); //獲取當(dāng)前地圖級(jí)別
			console.log('this.zoom', this.zoom);
		},
		markerAllhl() {
			this.map.clearMap();
			  this.markers = [
			  	{ position: [121.436531, 31.231003], title: '王斐', content: '王斐' },
			  	{ position: [121.460826, 31.222186], title: '許思睿', content: '許思睿' },
			  	{ position: [121.450816, 31.252146], title: '彭曄', content: '彭曄' },
			  	{ position: [121.480821, 31.282148], title: '林潔', content: '林潔' },
			  	{ position: [121.49082, 31.222149], title: '馮霞', content: '馮霞' },
			  	{ position: [121.410817, 31.214155], title: '王怡娜', content: '王怡娜' },
			  	{ position: [121.460818, 31.222147], title: '徐依媛', content: '徐依媛' },
			  	{ position: [121.46082, 31.222149], title: '張如真', content: '張如真' },
			  	{ position: [121.46125, 31.233147], title: '周韻', content: '周韻' },
			  	{ position: [121.469477, 31.277148], title: '徐天懌', content: '徐天懌' }
	    	 ]; 
			for (const markerInfo of  this.markers) {
				const markerPosition = markerInfo.position; // 標(biāo)記點(diǎn)的位置
				const markerTitle = markerInfo.title; // 標(biāo)記點(diǎn)的標(biāo)題
				const markerContent = markerInfo.content; // 標(biāo)記點(diǎn)的內(nèi)容
				const markerIcon = new AMap.Icon({
					image: 'https://webapi.amap.com/images/mass/mass0.png',
					size: new AMap.Size(20, 20),
					imageSize: new AMap.Size(20, 20)
				});
				this.marker = new AMap.Marker({
					icon: markerIcon,
					position: markerPosition
				});
				this.marker.setTitle(markerTitle);
				// this.marker.setContent(markerContent);
				this.marker.setMap(this.map);
	            // 添加點(diǎn)擊事件監(jiān)聽器
				this.marker.on('click', () => {
					// 在點(diǎn)擊事件中處理你想要的操作，例如彈出信息窗口等
					console.log('Marker Clicked:', markerTitle, markerContent);
				});
			}
		},
	 
	 
 
	}
};
</script>

<style scoped>
html,
body,
#container {
	width: 100%;
	height: 100%;
}
 
</style>

?以上就是 如果需要其他的方法 請(qǐng) 訪問 官網(wǎng)??

概述-地圖 JS API 2.0 | 高德地圖API文章來源地址http://www.zghlxwxcb.cn/news/detail-670020.html

到了這里，關(guān)于vue直接使用高德api的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！