vue直接使用高德api-编程知识

vue直接使用高德api

第一步：在index.html 引入

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

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

<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);},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>