如何在地图上显示多个红包商店 vue

1：申请百度，高德等任意一个地图的key
2：在vue的html中 引入

3：简单粗暴上代码
HTML:

   <section>
    <div id="map_canvas" class="map_canvas" style="width: 100%;height: 100%;"></div>
  </section>

script：

<script>
export default {
  name: "robRedpackage",
  data() {
    return {
      latitude:"",
      longitude:"",
      map: '',
      lnglats: [{
        name: '湄河港湾',
        position: [116.062366,36.462102],
        switchId: '1'
      }, {
        name: '装饰画',
        position: [116.057238,36.46454],
        switchId: '2'
      }, {
        name: '广告',
        position: [116.060216,36.465554],
        switchId: '3'
      }, {
        name: '门业',
        position: [116.057765,36.462365],
        switchId: '3'
      }]
    };
  },
  mounted() {
    // 接口
    this.init()

  },
  methods: {
    init() {
      this.$nextTick(() => {
        this.loadmap();
      })
    },

    loadmap() {
      let that = this
      that.map = new AMap.Map('map_canvas', {
        dragEnable: true,
        zoomEnanle: false,
        resizeEnable: true, // 地图加载完成
        zoom: 15, //初始化地图层级 比例尺部分
      });


      that.map.plugin('AMap.Geolocation', function() {
       var geolocation = new AMap.Geolocation({
         enableHighAccuracy: true, //是否使用高精度定位，默认:true
         timeout: 100, // 设置定位超时时间，默认：无穷大
         buttonOffset: new AMap.Pixel(10, 10), //定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
         zoomToAccuracy: false, //定位成功后是否自动调整地图视野到定位点
         panToLocation:true,//定位成功后，把定位得到的坐标设置为地图中心点坐标
        });
        that.map.addControl(geolocation);
        geolocation.getCurrentPosition();
        AMap.event.addListener(geolocation, 'complete', onComplete); //返回定位信息

        function onComplete(data) {
          // data是具体的定位信息
          console.log("定位成功信息：", data);
          // data是具体的定位信息
          this.latitude = data.position.getLat(); // 纬度
          this.longitude = data.position.getLng(); // 经度
          console.log("latitude", this.latitude, "longitude", this.longitude);
        }
      });
      // 出现marker
      for (let i = 0; i < that.lnglats.length; i++) {
        let marker = new AMap.Marker({
          position: that.lnglats[i].position, //采用默认样式，无需自定义
          icon: new AMap.Icon({
            image: require("@/assets/img/hong.png"), //定位点显示的图标
            size: new AMap.Size(100, 100), // 图标大小
            imageSize: new AMap.Size(26, 30),
          }),
        });
        marker.setMap(that.map);
        // 将switchId添加进marker
        marker.switchId = that.lnglats[i].switchId;
        // 设置label标签
        // label默认蓝框白底左上角显示，样式className为：amap-marker-label
        // marker.setLabel({
        //   offset: new AMap.Pixel(20, 20), //设置文本标注偏移量
        //   content: that.lnglats[i].name, //设置文本标注内容
        //   direction: 'top' //设置文本标注方位
        // });
        // 给标记加一个点击事件，传入对应的参数
        marker.on('click', function(e) {
          sessionStorage.setItem('switchId', e.target.switchId)
          // that.$router.push('/sec/innerBox')
          alert(e.target.switchId)
        })
        var circle = new AMap.Circle({
          center: new AMap.LngLat(116.05964, 36.46347),
          radius: 500, //半径
          strokeColor: "pink", //线的颜色
          strokeOpacity: 0, //线的透明度
          strokeWeight: 2, //线的粗细度
          fillColor: "pink", //填充颜色
          fillOpacity: 0.1 //填充透明度
        });
        // 圆的范围
        that.map.add(circle);
        // 比例尺的控件
        AMap.plugin(["AMap.ToolBar", "AMap.Scale", "AMap.OverView"], function() {
          that.map.addControl(new AMap.ToolBar());
        });
      }
    },

  }
};
</script>

style:

 section {
      overflow: auto;
      flex: 1;
      width: 100%;
      height: 100%;
       .map_canvas {
        width: 100%;
      min-height: 10rem;
         background: pink;
       }
    }