vue高德地图显示世界地点信息分布的多窗口问题

最新推荐文章于 2024-07-29 17:23:05 发布

秃头007号robot

最新推荐文章于 2024-07-29 17:23:05 发布

阅读量804

点赞数 1

分类专栏： vue可视化前端文章标签： javascript vue.js html

本文链接：https://blog.csdn.net/m0_51123132/article/details/120131877

版权

本文介绍了一种在Vue项目中利用高德地图显示多个地点文本信息的方法。由于高德地图API不支持同时显示多个信息窗口，作者选择了显示文本信息的折衷方案。鼓励读者探索自定义实现多窗口展示的解决方案。

摘要由CSDN通过智能技术生成

效果图
在这里插入图片描述

<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"), {