vue直接使用高德api-Toy模板网

这篇具有很好参考价值的文章主要介绍了vue直接使用高德api。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

第一步：在index.html 引入

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

vue直接使用高德api,vue.js,前端,javascript

第二步：在你需要地图的时候放入

<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()); //获取当前地图级别
			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; // 标记点的位置
				const markerTitle = markerInfo.title; // 标记点的标题
				const markerContent = markerInfo.content; // 标记点的内容
				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);
	            // 添加点击事件监听器
				this.marker.on('click', () => {
					// 在点击事件中处理你想要的操作，例如弹出信息窗口等
					console.log('Marker Clicked:', markerTitle, markerContent);
				});
			}
		},
	 
	 
 
	}
};
</script>

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