更新记录

1.0.1（2024-08-14） 下载此版本

组件优化

1.0.0（2024-08-14） 下载此版本

组件优化

平台兼容性

cc-offlineMap

cc-addressSet

我的技术公众号(关注后可加前端技术交流群)

群内气氛颇为不错，应该可能算为数不多专门进行技术交流的前端群，同时也涵盖后端以及各种产品的交流，偶尔成员们会聊天摸鱼。

使用方法

<template>
    <div>
  <div id='map-container' style="width: 100vw; height: 600px;">
  </div>
  <div>
    <button @click="handleMarker()">标记</button>
    <button @click="handlePolyline()">折线</button>
    <button @click="handleTextmark()">文本标记</button>

  </div>
  </div>
</template>

<script>
import "../../amap/AMap3.js"

export default {
  data() {
    return {
      mapObj: null,
    }
  },

  mounted() {
    this.initMap()
  },

  methods: {
    initMap() {
      // 自定义地图层
      const base_url = "../../amap/"
      const layers = [new AMap.TileLayer({
          getTileUrl: function (x, y, z) {
              return `${base_url}MAP_zxy/${z}/${x}/${y}.png`;
          },
          opacity: 1,
          zIndex: 99,
      })]

      this.mapObj = new AMap.Map('map-container', { // 设置地图容器id
          resizeEnable: true,
          zoom: 11,
          rotateEnable: true,
          pitchEnable: true,
          center: [113.098980, 23.361340],
          defaultCursor: 'pointer',
          showLabel: true,  //是否显示文字标注
          layers: layers,
          maxZoom: 18, // 根据你的瓦片数据设置最大缩放级别  
          minZoom: 3,  // 设置最小缩放级别 
      })
    },

    handleMarker() {

      let tmpArr = [[113.098980, 23.361340],[113.198980, 23.261340]];

      for (let loc of tmpArr) {

        // 添加定位点
        const marker = new AMap.Marker({
          position: loc, //位置
          name:'中国',

        });
        this.mapObj.add(marker); //添加到地图

        marker.on("click", function(e) {
            // 点击标记点时的回调函数
            console.log('您点击了标记点，其位置为：' + e.lnglat.getLng() + ',' + e.lnglat.getLat());
        });

        // 创建纯文本标记
        let text = new AMap.Text({
            text:'前端组件开发公众号',
            anchor:'center', // 设置文本标记锚点
            draggable:false,
            cursor:'pointer',
            angle:0,
            style:{
                'padding': '.25rem .25rem',
                'margin-bottom': '6rem',
                'border-radius': '.25rem',
                'background-color': 'white',
                'width': 'auto',
                'border-width': 0,
                'box-shadow': '0 2px 6px 0 rgba(114, 124, 245, .5)',
                'text-align': 'center',
                'font-size': '14px',
                'color': '#333'
            },
            position: loc
        });
        text.setMap(this.mapObj);
      }

    },

    handlePolyline() {
      const lineArr = [
        [113.098980, 23.361340],
        [113.092980, 23.361340],
        [113.092980, 23.366340]
      ];
      const polyline = new AMap.Polyline({
        path: lineArr, //设置线覆盖物路径
        strokeColor: "red", //线颜色
        strokeWeight: 5, //线宽
        strokeStyle: "solid", //线样式
      });
      this.mapObj.add(polyline);
    },

    handleTextmark() {
      // 创建纯文本标记
      let text = new AMap.Text({
          text:'粤电花都燃气电厂',
          anchor:'center', // 设置文本标记锚点
          draggable:true,
          cursor:'pointer',
          angle:10,
          style:{
              'padding': '.75rem 1.25rem',
              'margin-bottom': '1rem',
              'border-radius': '.25rem',
              'background-color': 'white',
              'width': '10rem',
              'border-width': 0,
              'box-shadow': '0 2px 6px 0 rgba(114, 124, 245, .5)',
              'text-align': 'center',
              'font-size': '20px',
              'color': 'blue'
          },
          position: [113.098980, 23.362240]
      });
      text.setMap(this.mapObj);

      // let text1 = new AMap.Text({
      //     text:'双一橡胶',
      //     anchor:'center', // 设置文本标记锚点
      //     draggable:true,
      //     cursor:'pointer',
      //     angle:10,
      //     style:{
      //         'padding': '.75rem 1.25rem',
      //         'margin-bottom': '1rem',
      //         'border-radius': '.25rem',
      //         'background-color': 'white',
      //         'width': '10rem',
      //         'border-width': 0,
      //         'box-shadow': '0 2px 6px 0 rgba(114, 124, 245, .5)',
      //         'text-align': 'center',
      //         'font-size': '20px',
      //         'color': 'blue'
      //     },
      //     position: [113.092980, 23.366340]
      // });
      // text1.setMap(this.mapObj)
    },

  },

}

</script>

<style>
@media (min-width: 1024px) {
  .about {
    min-height: 100vh;
    display: flex;
    align-items: center;
  }
}
</style>