如何在地圖上顯示多個紅包商店 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;
       }
    }