更新记录

1.0.2（2024-11-23） 下载此版本

优化说明

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

组件优化

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

组件优化

平台兼容性

cc-offlineMap

uniapp专属精品组件页面模板（由前端组件开发出品）精品组件页面模板

●组件模板规划：

由前端组件开发出品的精品组件页面模板，将陆续发布，预计高达约几百种供您使用，是快速快发项目、创业的必备精品。

合集地址： uni-app模板合集地址：(https://ext.dcloud.net.cn/publisher?id=274945) 如查看全部页面模板，请前往上述uniapp插件市场合集地址；

●组件模板效果图：

可下载项目后预览，效果图见右侧图片；

●组件模板费用：

学习：免费下载，进行学习，无费用；

使用/商用：本页面地址赞赏12元后，可终身商用；

●组件模板使用版权/商用：

本组件模板免费下载可供学习，如需使用及商用，请在本组件页面模板进行赞赏12元

（仅需12元获取精品页面模板代码-物有所值，1个组件页面市场价100元 ）

赞赏12元后（当前项目产生赞赏订单可追溯）即可终身商用当前本地址下载的页面模版代码，不同下载地址需进行不同的赞赏。（不赞赏就进行商用使用者，面临侵权！保留追究知识产权法律责任！后果自负！）

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

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

使用方法

<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>