效果圖

<template><div class="home"><div class="map" id="container"></div></div> </template><script> // @ is an alias to /src export default {name: 'worldMap',components: {},data () {return {map: '',infoWindow: '',marker: '',// timer: '',n: 0,list: [{name: '安哥拉',longitude: '12.222318',latitude: '-4.909572',year:'2017'},{name: '諾福克島',longitude: '167.953035',latitude: '-29.035248',year:'2021'} ]}},mounted () {this.initMap()},methods: {// 初始化地圖控件方法initMap() {this.map = new AMap.Map(document.getElementById("container"), {mapStyle: 'amap://styles/normal',resizeEnable: false,center: [this.list[0].longitude, this.list[0].latitude],//地圖中心點zoom: 4,//地圖顯示的縮放級別keyboardEnable: false,zoomEnable: true,dragEnable: true,animateEnable: true});// 循環初始化所有坐標點this.list.forEach(v => {this.initMarker({ lng: v.longitude, lat: v.latitude }, v);this.n ++;})// 通過定時器對地圖坐標進行輪播// this.setInter()},// 初始化坐標點的iconinitMarker(location, item) {// console.log('Location', location, item)// 生成坐標點iconlet icon = new AMap.Icon({size: new AMap.Size(20, 20),image: require("../assets/images/mark.png"),imageSize: new AMap.Size(20, 20)});// 坐標點 生成方法this.marker = new AMap.Marker({icon: icon, // 坐標點圖標position: [location.lng, location.lat], // 左邊點的經緯度offset: new AMap.Pixel(0, -30) // 坐標點偏移量});this.marker.setLabel({offset:new AMap.Pixel(0,0),content:this.createInfoWindow(this.list[this.n]),direction:'bottom'});// 坐標點添加點擊事件 用來打開自定義窗口 也可直接添加窗口自動全部打開狀態// this.marker.on('click', (e) => {// // console.log('marker 添加點擊事件：', e, e.pixel.x, e.pixel.y)// this.initInfoWindow(location.lng, location.lat, item)// // 點擊當前標點移動至地圖中心點// this.setCenter(location.lng, location.lat)// this.infoWindow.open(this.map, e.lnglat)// })// 初始化坐標點自定義窗口this.initInfoWindow(location.lng, location.lat, item)// 打開窗口的方法 這里也可以通過 點擊坐標點打開this.infoWindow.open(this.map, {Q: location.lat, R: location.lng, lat: location.lat, lng: location.lng})// this.marker.setMap(this.map)},// 初始化信息窗體initInfoWindow(lng, lat, item) {// console.log('創建了信息窗體')this.infoWindow = new AMap.InfoWindow({isCustom: false, //使用自定義窗體anchor: 'bottom-center',content: '',offset: new AMap.Pixel(0, -20),autoMove: true,closeWhenClickMap: false,});},// 創建信息窗體createInfoWindow(item) {if(this.n<this.list.length -1 ){// this.n = this.n -1;console.log(this.n)// ++this.n;}return `<div class="dn-info-window"><div class="dn-info-name">${item.name}</div><div class="dn-info-num">發生年份：<span>${item.year}</span></div></div>`}// 輪循坐標點方法// setInter() {// this.timer = setInterval(() => {// // 輪播當前標點移動至地圖中心點// this.setCenter(this.list[this.n].longitude, this.list[this.n].latitude)// this.initMarker({ lng: this.list[this.n].longitude, lat: this.list[this.n].latitude }, this.list[this.n])// if (this.n == (this.list.length - 1)) {// this.n = 0// } else {// this.n++// }// }, 1000)// },// 當前標點移動至地圖中心// setCenter (long, lati) {// this.map.setCenter([long, lati])// }}// beforeDestroy () {// clearInterval(this.timer)// } } </script> <style lang="less" scoped> .map{width: 100%;height: 1000px; } // 自定義窗體的樣式 /deep/.info-window {padding: 10px;background: rgba(4, 77, 145, 0.753);color: #3196FA;border-radius: 10px;-webkit-border-radius: 10px;-moz-border-radius: 10px;-ms-border-radius: 10px;-o-border-radius: 10px;.info-name {font-size: 16px;font-family: PingFang SC;font-weight: 500;color: #FFFFFF;}.info-num {font-size: 14px;font-family: PingFang SC;font-weight: 400;color: #A5A3A1;>span {font-size: 14px;color: #3196FA;&.active-color {color: #EF4864;}}} } </style>

這是在其他作者的基礎上做的少量修改，能同時顯示多點的文本信息，本來打算用信息窗口的，畢竟能顯示更多類型的數據，不過高德地圖不提供同時顯示的API，只能選了折中的方法只顯示文本信息，有興趣的大佬可以研究下自定義同時顯示多窗體的方法，而不是直接用API

總結

以上是生活随笔為你收集整理的vue高德地图显示世界地点信息分布的多窗口问题的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。