nowwa-system/vue-admin-template-master/src/views/shapmap/map/index.vue

<template>
  <div class="content">
    <div id="container">门店地图</div>
  </div>
</template>

<script>
import shop_icon from "@/assets/img/shop_icon.png";
var searchService,
  markers = [],
  that;
export default {
  data() {
    return {
      searchValue: ""
    };
  },
  mounted() {
    this.init();
    that = this;
  },
  methods: {
    async init() {
      //步骤：定义map变量 调用 TMap.Map() 构造函数   获取地图显示容器
      //设置地图中心点
      var myLatlng = new TMap.LatLng(31.169083, 121.432358);
      //定义工厂模式函数
      var myOptions = {
        zoom: 12, //设置地图缩放级别
        center: myLatlng //设置中心点样式
        // mapTypeId: TMap.MapTypeId.ROADMAP //设置地图样式详情参见MapType
      };
      //获取dom元素添加地图信息
      var map = new TMap.Map(document.getElementById("container"), myOptions);
      //   new TMap.MarkerImage(shop_icon);
      let res = await this.getData();
      let geometries = [];
      res.forEach(v => {
        if (v.gdlat) {
          geometries.push({
            styleId: "circle",
            center: new TMap.LatLng(v.gdlat, v.gdlng),
            // position: new TMap.LatLng(v.lat, v.lng),
            radius: 3000
          });
        }
      });

      var circle = new TMap.MultiCircle({
        map,
        styles: {
          // 设置圆形样式
          circle: new TMap.CircleStyle({
            color: "rgba(41,91,255,0.16)",
            showBorder: true,
            borderColor: "rgba(41,91,255,1)",
            borderWidth: 1
          })
        },
        geometries
      });
    },
    getData() {
      return new Promise(resolve => {
        fetch("https://talk.cirray.cn/api/shops")
          .then(function(response) {
            return response.json();
          })
          .then(function(myJson) {
            resolve(myJson);
          });
      });
    }
  }
};
</script>

<style scoped>
.content {
  padding: 20px;
}
#container {
  width: 100%;
  height: 90vh;
}
.search-row {
  padding-bottom: 20px;
}
.search-row button {
  margin: 0 10px;
}
</style>