vue2 implementa el marcado de puntos masivos Amap JSAPI 2.0 (etiquetado y capas de etiquetado) -> Puntos personalizados -> Puntos actualizados periódicamente

Mobile 2023-10-07 17:11:51 views: null

Requisito previo: debe registrarse en la plataforma abierta Amap, luego crear una aplicación y activar Web端(JS API)la plataforma, y ​​luego obtener securityJsCodeelkey

1. Extracción básica (ejemplo de restauración)

1.1 Código de componente

Descripción del código:

  1. Necesitas modificar securityJsCodey keyhacer el tuyo propio.
  2. allowCollisionYa sea para evitar marcadores para etiquetar, el valor predeterminado es falso y no evita marcadores.
  3. markersuna serie de marcadores en el mapa
  4. layeres una capa de anotación, que puede entenderse como una capa
  5. En realidad, el proceso simplemente markersse carga layery luego layerse carga en el mapa.
  6. this.map.setFitView(null, false, [100, 150, 10,10]);
    • Según la distribución de la cobertura agregada en el mapa, el mapa se acerca automáticamente al nivel de campo de visión apropiado y los parámetros se pueden establecer de forma predeterminada. overlayListEs una matriz de superposiciones. De forma predeterminada, son todas las capas superpuestas agregadas al mapa actual. Representa immediatelysi se requiere el proceso de animación. avoidRepresenta el ancho de evitación de píxeles de la parte superior, inferior, izquierda y derecha, y maxZoomrepresenta el máximo. nivel después de fitView.
    • Descripción de parámetros:
    • setFitView(overlays, immediately, avoid, maxZoom)
      • superposiciones (Array<Overlay>)que cubren
      • inmediatamente (Boolean = false)si realizar la transición inmediatamente
      • Evite (Array<Number> = [60,60,60,60])la distancia circundante, arriba, abajo, izquierda, derecha.
      • maxZoomNivel (Number = zooms[1])de zoom máximo
  7. allowCollisionFuncnotAllowCollisionFuncNo he utilizado el método and , su función principal es controlar el etiquetado y evitar marcadores.
    • Si necesita esta función para crear dos botones nuevos, simplemente haga clic en el evento para vincular estos dos métodos;
  8. toggleBtnEl método consiste en modificar si se utiliza el botón para evitar etiquetas de control (deshabilitar)
    • Si necesita que vue implemente esta función, solo necesita vincular la desactivación del botón correspondiente a allowCollision;
<template>
  <div id="container"></div>
</template>

<script>
  //这里可以导入其他文件（比如： 组件， 工具 js， 第三方插件 js， json文件， 图片文件等等）
  //例如： import 《组件名称》 from '《组件路径》 ';

  import AMapLoader from "@amap/amap-jsapi-loader";
  import moment from "moment";
  import {getTrackList} from '@/services/attendance/statistics.js'
  // 设置安全密钥
  window._AMapSecurityConfig = {
    securityJsCode: 'xxxx你的securityJsCodexxxx',
  }
  export default {
    name: 'PositionContainer',
    //import 引入的组件需要注入到对象中才能使用
    components: {},
    props: {
    },
    data() {
      //这里存放数据
      return {
        AMap: null,
        //此处不声明 map 对象，可以直接使用 this.map赋值或者采用非响应式的普通对象来存储。
        map: null,
        mouseTool: null,
        marker: null,
        allowCollision: false,//标注避让marker
        markers: [],
        layer: null,
      };
    },
    //计算属性 类似于 data 概念
    computed: {},
    //监控 data 中的数据变化
    watch: {
    },
    //方法集合
    methods: {
      allowCollisionFunc () {
        this.allowCollision = true;
        this.layer.setAllowCollision(true);
        this.toggleBtn();
      },
      notAllowCollisionFunc () {
        this.allowCollision = false;
        this.layer.setAllowCollision(false);
        this.toggleBtn();
      },
      toggleBtn (){
        var allowCollisionBtn = document.getElementById('allowCollision');
        var notAllowCollisionBtn = document.getElementById('notAllowCollision');
        var disableClass = 'disable';

        if(this.allowCollision){
          allowCollisionBtn.classList.add(disableClass);
          notAllowCollisionBtn.classList.remove(disableClass);
        }else {
          allowCollisionBtn.classList.remove(disableClass);
          notAllowCollisionBtn.classList.add(disableClass);
        }
      },
      initMarkers(AMap) {
        // 设置一个图标对象
        var icon = {
          // 图标类型，现阶段只支持 image 类型
          type: 'image',
          // 图片 url
          image: 'https://a.amap.com/jsapi_demos/static/demo-center/marker/express2.png',
          // 图片尺寸
          size: [64, 30],
          // 图片相对 position 的锚点，默认为 bottom-center
          anchor: 'center',
        };
        var textStyle = {
          fontSize: 12,
          fontWeight: 'normal',
          fillColor: '#22886f',
          strokeColor: '#fff',
          strokeWidth: 2,
          fold: true,
          padding: '2, 5',
        };
        var LabelsData = [
          {
            name: '自提点1',
            position: [116.461009, 39.991443],
            zooms: [10, 20],
            opacity: 1,
            zIndex: 10,
            fold: true,
            icon,
            text: {
              // 要展示的文字内容
              content: '中邮速递易',
              // 文字方向，有 icon 时为围绕文字的方向，没有 icon 时，则为相对 position 的位置
              direction: 'right',
              // 在 direction 基础上的偏移量
              offset: [-20, -5],
              // 文字样式
              style: {
                // 字体大小
                fontSize: 12,
                // 字体颜色
                fillColor: '#22886f',
                //
                strokeColor: '#fff',
                strokeWidth: 2,
                fold: true,
                padding: '2, 5',
              }
            }
          },
          {
            name: '自提点2',
            position: [116.466994, 39.984904],
            zooms: [10, 20],
            opacity: 1,
            zIndex: 16,
            icon,
            text: {
              content: '丰巢快递柜-花家地北里',
              direction: 'right',
              offset: [-20, -5],
              style: textStyle
            }
          },
          {
            name: '自提点3',
            position: [116.472914, 39.987093],
            zooms: [10, 20],
            opacity: 1,
            zIndex: 8,
            icon,
            text: {
              content: '丰巢快递柜-中环南路11号院',
              direction: 'right',
              offset: [-20, -5],
              style: textStyle
            }
          },
          {
            name: '自提点4',
            position: [116.471814, 39.995856],
            zooms: [10, 20],
            opacity: 1,
            zIndex: 23,
            icon,
            text: {
              content: '丰巢快递柜-合生麒麟社',
              direction: 'right',
              offset: [-20, -5],
              style: textStyle
            }
          },
          {
            name: '自提点5',
            position: [116.469639, 39.986889],
            zooms: [10, 20],
            opacity: 1,
            zIndex: 6,
            icon,
            text: {
              content: '速递易快递柜-望京大厦',
              direction: 'right',
              offset: [-20, -5],
              style: textStyle
            }
          },
          {
            name: '自提点6',
            position: [116.467361, 39.996361],
            zooms: [10, 20],
            opacity: 1,
            zIndex: 5,
            icon,
            text: {
              content: 'E栈快递柜-夏都家园',
              direction: 'right',
              offset: [-20, -5],
              style: textStyle
            }
          },
          {
            name: '自提点7',
            position: [116.462327, 39.996071],
            zooms: [10, 20],
            opacity: 1,
            zIndex: 4,
            icon,
            text: {
              content: '丰巢自提柜-圣馨大地家园',
              direction: 'right',
              offset: [-20, -5],
              style: textStyle
            }
          },
          {
            name: '自提点8',
            position: [116.462349, 39.996067],
            zooms: [10, 20],
            opacity: 1,
            zIndex: 3,
            icon,
            text: {
              content: '丰巢快递-圣馨大地家园',
              direction: 'right',
              offset: [-20, -5],
              style: textStyle
            }
          },
          {
            name: '自提点9',
            position: [116.456474, 39.991563],
            zooms: [10, 20],
            zIndex: 2,
            opacity: 1,
            icon,
            text: {
              content: 'E栈快递柜-南湖渠西里',
              direction: 'right',
              offset: [-20, -5],
              style: textStyle
            }
          }
        ];

        this.layer = new AMap.LabelsLayer({
          zooms: [3, 20],
          zIndex: 1000,
          // collision: false,
          // 设置 allowCollision：true，可以让标注避让用户的标注
          allowCollision: this.allowCollision,
        });
        this.layer.add(this.markers);
        // 图层添加到地图
        this.map.add(this.layer);

        // 初始化 labelMarker
        for (var i = 0; i < LabelsData.length; i++) {
          var curData = LabelsData[i];
          curData.extData = {
            index: i
          };

          var labelMarker = new AMap.LabelMarker(curData);

          this.markers.push(labelMarker);

        }
        // 将 marker 添加到图层
        this.layer.add(this.markers);

        this.map.setFitView(null, false, [100, 150, 10, 10]);

        this.toggleBtn()
      },
      initMap() {
        AMapLoader.load({
          key: "xxxx你的keyCodexxxx",             // 申请好的Web端开发者Key，首次调用 load 时必填
          version: "2.0",      // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
          "plugins": [
            "AMap.Scale",
            "AMap.HawkEye",
            "AMap.ToolBar",
            "AMap.AutoComplete",
            "AMap.PlaceSearch",
            "AMap.ControlBar",
            "AMap.MouseTool",
            "AMap.DragRoute",
            "AMap.MoveAnimation"],         // 需要使用的的插件列表，如比例尺'AMap.Scale'等
        }).then((AMap) => {

          this.AMap=AMap
          this.map = new AMap.Map("container", {  //设置地图容器id
            zoom: 15.8,   // 初始化地图级别
            center: [116.469881, 39.993599], //中心点坐标  成都 104.065735, 30.659462
            showIndoorMap: false,
          });

          this.initMarkers(AMap);


        }).catch(e => {
          console.log(e);
        })
      },
    },
    //生命周期 - 创建完成（可以访问当前 this 实例）
    created() {
      // this.getLineArr(this.equipmentId,moment().valueOf())
    },
    //生命周期 - 挂载完成（可以访问 DOM 元素）
    mounted() {
      this.initMap();
    },
    //生命周期 - 创建之前
    beforeCreate() {
    },
    //生命周期 - 挂载之前
    beforeMount() {
    },
    //生命周期 - 更新之前
    beforeUpdate() {
    },
    //生命周期 - 更新之后
    updated() {
    },
    //生命周期 - 销毁之前
    beforeDestroy() {
    },
    //生命周期 - 销毁完成
    destroyed() {
    },
    //如果页面有 keep-alive 缓存功能， 这个函数会触发
    activated() {
    },
  }
</script>

<style scoped>
  #container {
    padding: 0px;
    margin: 0px;
    width: 100%;
    height: 800px;
  }
  .input-item {
    height: 2.2rem;
  }

  .input-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    border-radius: .25rem;
    width: 10rem;
    border-width: 0;
    border-radius: 0.4rem;
    box-shadow: 0 2px 6px 0 rgba(114, 124, 245, .5);
    position: fixed;
    bottom: 12rem;
    right: 2rem;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    padding: 0.75rem 1.25rem;
  }
</style>

1.2 Ejemplos de uso

Simplemente introduce los componentes.

<template>
  <PositionContainer></PositionContainer>
</template>

<script>
  //这里可以导入其他文件（比如： 组件， 工具 js， 第三方插件 js， json文件， 图片文件等等）
  //例如： import 《组件名称》 from '《组件路径》 ';
  import PositionContainer from '@/pages/components/map/PositionContainer';
  export default {
    name: 'Position',
    //import 引入的组件需要注入到对象中才能使用
    components: {PositionContainer},
    props: {},
    data() {
      //这里存放数据
      return {};
    },
    //计算属性 类似于 data 概念
    computed: {},
    //监控 data 中的数据变化
    watch: {},
    //方法集合
    methods: {},
    //生命周期 - 创建完成（可以访问当前 this 实例）
    created() {},
    //生命周期 - 挂载完成（可以访问 DOM 元素）
    mounted() {},
    //生命周期 - 创建之前
    beforeCreate() {},
    //生命周期 - 挂载之前
    beforeMount() {},
    //生命周期 - 更新之前
    beforeUpdate() {},
    //生命周期 - 更新之后
    updated() {},
    //生命周期 - 销毁之前
    beforeDestroy() {},
    //生命周期 - 销毁完成
    destroyed() {},
    //如果页面有 keep-alive 缓存功能， 这个函数会触发
    activated() {},
  }
</script>

<style scoped>

</style>

1.3 Lograr resultados

imagen-20230510152656125

2. Extracción avanzada (puntos personalizados + íconos diferentes para cada punto + etiquetas diferentes para cada punto)

Los datos de puntos aquí son los datos devueltos por el backend. Si es necesario, puede simular los datos usted mismo.

La estructura de datos devuelta por el backend es similar a la siguiente

[
  {
     
     
    "sys_time": 1674206183000,
    "user_name": "名称1",
    "jingdu": 104.751846,
    "weidu": 31.767537,
    "sendTime": "2023-01-20 17:16:23"
    
  },
  {
     
     
    "sys_time": 1677735439000,
    "user_name": "名称2",
    "jingdu": 104.7560758,
    "weidu": 31.767168,
    "sendTime": "2023-01-20 17:16:23"
  }
]

2.1 Código de componente

Descripción del código:

  1. getNewestPositionsEl método consiste en llamar a la interfaz de backend para devolver datos.
  2. Luego ensamble el recorrido de la lista de fondo en la matriz que necesitamosLabelsData
  3. content: item.user_name+'-'+item.sendTimeConfigure nuestra etiqueta de visualización,
  4. image: 'https://a.amap.com/jsapi_demos/static/demo-center/marker/express2.png',Configure el ícono de nuestro punto. Después de que los usuarios posteriores tengan el ícono, podrán obtener datos del backend. Lo escribiré primero.
  5. Establezca los primeros datos de los datos del backend en el centro del mapa.
<template>
  <div id="container"></div>
</template>

<script>
  //这里可以导入其他文件（比如： 组件， 工具 js， 第三方插件 js， json文件， 图片文件等等）
  //例如： import 《组件名称》 from '《组件路径》 ';

  import AMapLoader from "@amap/amap-jsapi-loader";
  import {getNewestPositions} from '@/services/attendance/position.js'
  // 设置安全密钥
  window._AMapSecurityConfig = {
    securityJsCode: 'xxxx你的securityJsCodexxxx',
  }
  export default {
    name: 'PositionContainer',
    //import 引入的组件需要注入到对象中才能使用
    components: {},
    props: {
    },
    data() {
      //这里存放数据
      return {
        AMap: null,
        //此处不声明 map 对象，可以直接使用 this.map赋值或者采用非响应式的普通对象来存储。
        map: null,
        mouseTool: null,
        marker: null,
        allowCollision: false,//标注避让marker
        markers: [],
        layer: null,
        LabelsData:[],
        center: [104.065735, 30.659462],
      };
    },
    //计算属性 类似于 data 概念
    computed: {},
    //监控 data 中的数据变化
    watch: {
    },
    //方法集合
    methods: {
      newestPositions () {
        getNewestPositions().then(res => {
          if (res.data.code==0){
            var postions = res.data.data
            console.log(res.data.data)
            this.LabelsData =res.data.data.map(item=>{
              var labelsData = {
                name: item.user_name,
                position: [item.jingdu, item.weidu],
                zooms: [10, 20],
                opacity: 1,
                zIndex: 10,
                fold: true,
                icon: {
                  // 图标类型，现阶段只支持 image 类型
                  type: 'image',
                  // 图片 url
                  image: 'https://a.amap.com/jsapi_demos/static/demo-center/marker/express2.png',
                  // 图片尺寸
                  size: [64, 30],
                  // 图片相对 position 的锚点，默认为 bottom-center
                  anchor: 'center',
                },
                text: {
                  // 要展示的文字内容
                  content: item.user_name+'-'+item.sendTime,
                  // 文字方向，有 icon 时为围绕文字的方向，没有 icon 时，则为相对 position 的位置
                  direction: 'right',
                  // 在 direction 基础上的偏移量
                  offset: [-20, -5],
                  // 文字样式
                  style: {
                    // 字体大小
                    fontSize: 12,
                    // 字体颜色
                    fillColor: '#22886f',
                    //
                    strokeColor: '#fff',
                    strokeWidth: 2,
                    fold: false,
                    padding: '2, 5',
                  }
                }
              }
              return labelsData
            })
            this.center=[postions[0].jingdu, postions[0].weidu]
            this.initMap()
          }else {
            this.$message.error(res.data.msg)
          }

        })
      },
      initMarkers(AMap) {


        this.layer = new AMap.LabelsLayer({
          zooms: [3, 20],
          zIndex: 1000,
          // collision: false,
          // 设置 allowCollision：true，可以让标注避让用户的标注
          allowCollision: this.allowCollision,
        });
        this.layer.add(this.markers);
        // 图层添加到地图
        this.map.add(this.layer);

        // 初始化 labelMarker
        for (var i = 0; i < this.LabelsData.length; i++) {
          var curData = this.LabelsData[i];
          curData.extData = {
            index: i
          };

          var labelMarker = new AMap.LabelMarker(curData);

          this.markers.push(labelMarker);

        }
        // 将 marker 添加到图层
        this.layer.add(this.markers);

        this.map.setFitView(null, false, [100, 150, 10, 10]);

        // this.toggleBtn()
      },
      initMap() {
        AMapLoader.load({
          key: "xxxx你的keyxxxx",             // 申请好的Web端开发者Key，首次调用 load 时必填
          version: "2.0",      // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
          "plugins": [
            "AMap.Scale",
            "AMap.HawkEye",
            "AMap.ToolBar",
            "AMap.AutoComplete",
            "AMap.PlaceSearch",
            "AMap.ControlBar",
            "AMap.MouseTool",
            "AMap.DragRoute",
            "AMap.MoveAnimation"],         // 需要使用的的插件列表，如比例尺'AMap.Scale'等
        }).then((AMap) => {
          this.AMap=AMap
          this.map = new AMap.Map("container", {  //设置地图容器id
            zoom: 15.8,   // 初始化地图级别
            center: this.center, //中心点坐标  成都 104.065735, 30.659462
            showIndoorMap: false,
          });

          this.initMarkers(AMap);


        }).catch(e => {
          console.log(e);
        })
      },
    },
    //生命周期 - 创建完成（可以访问当前 this 实例）
    created() {
      this.newestPositions()
    },
    //生命周期 - 挂载完成（可以访问 DOM 元素）
    mounted() {
      this.initMap();
    },
    //生命周期 - 创建之前
    beforeCreate() {
    },
    //生命周期 - 挂载之前
    beforeMount() {
    },
    //生命周期 - 更新之前
    beforeUpdate() {
    },
    //生命周期 - 更新之后
    updated() {
    },
    //生命周期 - 销毁之前
    beforeDestroy() {
    },
    //生命周期 - 销毁完成
    destroyed() {
    },
    //如果页面有 keep-alive 缓存功能， 这个函数会触发
    activated() {
    },
  }
</script>

<style scoped>
  #container {
    padding: 0px;
    margin: 0px;
    width: 100%;
    height: 800px;
  }
  .input-item {
    height: 2.2rem;
  }

  .input-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    border-radius: .25rem;
    width: 10rem;
    border-width: 0;
    border-radius: 0.4rem;
    box-shadow: 0 2px 6px 0 rgba(114, 124, 245, .5);
    position: fixed;
    bottom: 12rem;
    right: 2rem;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    padding: 0.75rem 1.25rem;
  }
</style>

2.2 Ejemplos de uso

Consulte 1.2, sin cambios.

2.3 Efecto de extracción

imagen-20230511163123663

Después de hacer zoom en el mapa

imagen-20230511163225355

3. Extracción final (puntos de actualización regulares)

3.1 Código de componente

Descripción del código:

  1. Utilice temporizadores para realizar tareas programadas
    • this.timer = setInterval(this.newestPositionsWithoutInitMap, 120 * 1000);
  2. Recuerda beforeDestroy()cuando clearInterval(this.timer);
  3. this.map.setFitView(null, false, [100, 150, 10, 10]); Ampliar el mapa a la ubicación adecuada
    • Esto hará que el mapa se amplíe al máximo cada vez que lo actualicemos, debido a esto
  4. La idea central es solicitar periódicamente la interfaz de backend a través de un temporizador y luego representar los marcadores del mapa.
<template>
  <div id="container"></div>
</template>

<script>
  //这里可以导入其他文件（比如： 组件， 工具 js， 第三方插件 js， json文件， 图片文件等等）
  //例如： import 《组件名称》 from '《组件路径》 ';

  import AMapLoader from "@amap/amap-jsapi-loader";
  import {getNewestPositions} from '@/services/attendance/position.js'
  // 设置安全密钥
  window._AMapSecurityConfig = {
    securityJsCode: 'xxxx你的securityJsCodexxxx',
  }
  export default {
    name: 'PositionContainer',
    //import 引入的组件需要注入到对象中才能使用
    components: {},
    props: {
    },
    data() {
      //这里存放数据
      return {
        AMap: null,
        //此处不声明 map 对象，可以直接使用 this.map赋值或者采用非响应式的普通对象来存储。
        map: null,
        mouseTool: null,
        marker: null,
        allowCollision: false,//标注避让marker
        markers: [],
        layer: null,
        LabelsData:[],
        center: [104.065735, 30.659462],
        timer: '',
        zoom: '',
      };
    },
    //计算属性 类似于 data 概念
    computed: {},
    //监控 data 中的数据变化
    watch: {
    },
    //方法集合
    methods: {
      createLable: function (res) {
        var postions = res.data.data
        this.LabelsData = res.data.data.map(item => {
          var labelsData = {
            name: item.user_name,
            position: [item.jingdu, item.weidu],
            zooms: [10, 20],
            opacity: 1,
            zIndex: 10,
            fold: true,
            icon: {
              // 图标类型，现阶段只支持 image 类型
              type: 'image',
              // 图片 url
              image: 'https://a.amap.com/jsapi_demos/static/demo-center/marker/express2.png',
              // 图片尺寸
              size: [64, 30],
              // 图片相对 position 的锚点，默认为 bottom-center
              anchor: 'center',
            },
            text: {
              // 要展示的文字内容
              content: item.user_name + '-' + item.sendTime,
              // 文字方向，有 icon 时为围绕文字的方向，没有 icon 时，则为相对 position 的位置
              direction: 'right',
              // 在 direction 基础上的偏移量
              offset: [-20, -5],
              // 文字样式
              style: {
                // 字体大小
                fontSize: 12,
                // 字体颜色
                fillColor: '#22886f',
                //
                strokeColor: '#fff',
                strokeWidth: 2,
                fold: false,
                padding: '2, 5',
              }
            }
          }
          return labelsData
        })
        this.center = [postions[0].jingdu, postions[0].weidu]
      },

      newestPositions () {
        getNewestPositions().then(res => {
          if (res.data.code==0){
            this.createLable(res);
            this.initMap()
          }else {
            this.$message.error(res.data.msg)
          }

        })
      },


      newestPositionsWithoutInitMap () {
        getNewestPositions().then(res => {
          if (res.data.code==0){
            this.createLable(res);
            this.initMarkers(this.AMap)
          }else {
            this.$message.error(res.data.msg)
          }

        })
      },
      initMarkers(AMap) {
        this.markers=[]

        this.layer = new AMap.LabelsLayer({
          zooms: [3, 20],
          zIndex: 1000,
          // collision: false,
          // 设置 allowCollision：true，可以让标注避让用户的标注
          allowCollision: this.allowCollision,
        });
        this.layer.add(this.markers);
        // 图层添加到地图
        this.map.clearMap()
        this.map.add(this.layer);

        // 初始化 labelMarker
        for (var i = 0; i < this.LabelsData.length; i++) {
          var curData = this.LabelsData[i];
          curData.extData = {
            index: i
          };

          var labelMarker = new AMap.LabelMarker(curData);

          this.markers.push(labelMarker);

        }
        // 将 marker 添加到图层
        this.layer.add(this.markers);

        // this.map.setFitView(null, false, [100, 150, 10, 10]);  //地图缩放到合适的位置,开启每次都会缩放到最大状态

        // this.toggleBtn()
      },
      initMap() {
        AMapLoader.load({
          key: "xxxx你的keyxxxx",             // 申请好的Web端开发者Key，首次调用 load 时必填
          version: "2.0",      // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
          "plugins": [
            "AMap.Scale",
            "AMap.HawkEye",
            "AMap.ToolBar",
            "AMap.AutoComplete",
            "AMap.PlaceSearch",
            "AMap.ControlBar",
            "AMap.MouseTool",
            "AMap.DragRoute",
            "AMap.MoveAnimation"],         // 需要使用的的插件列表，如比例尺'AMap.Scale'等
        }).then((AMap) => {
          this.AMap=AMap
          this.map = new AMap.Map("container", {  //设置地图容器id
            zoom: 15.8,   // 初始化地图级别
            center: this.center, //中心点坐标  成都 104.065735, 30.659462
            showIndoorMap: false,
          });

          this.initMarkers(AMap);

          // this.map.on('zoomend', function (e) {
          //   this.zoom =this.map.getZoom();
          //   console.log(this.zoom)
          //
          // }.bind(this));


        }).catch(e => {
          console.log(e);
        })
      },
    },
    //生命周期 - 创建完成（可以访问当前 this 实例）
    created() {
      this.newestPositions()
    },
    //生命周期 - 挂载完成（可以访问 DOM 元素）
    mounted() {
      this.timer = setInterval(this.newestPositionsWithoutInitMap, 120 * 1000);
      this.initMap();
    },
    //生命周期 - 创建之前
    beforeCreate() {
    },
    //生命周期 - 挂载之前
    beforeMount() {
    },
    //生命周期 - 更新之前
    beforeUpdate() {
    },
    //生命周期 - 更新之后
    updated() {
    },
    //生命周期 - 销毁之前
    beforeDestroy() {
      clearInterval(this.timer);
    },
    //生命周期 - 销毁完成
    destroyed() {
    },
    //如果页面有 keep-alive 缓存功能， 这个函数会触发
    activated() {
    },
  }
</script>

<style scoped>
  #container {
    padding: 0px;
    margin: 0px;
    width: 100%;
    height: 800px;
  }
  .input-item {
    height: 2.2rem;
  }

  .input-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    border-radius: .25rem;
    width: 10rem;
    border-width: 0;
    border-radius: 0.4rem;
    box-shadow: 0 2px 6px 0 rgba(114, 124, 245, .5);
    position: fixed;
    bottom: 12rem;
    right: 2rem;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    padding: 0.75rem 1.25rem;
  }
</style>

3.2 Ejemplos de uso

Consulte 1.2, sin cambios.

3.3 Efecto de extracción

La posición se actualiza cada 2 minutos según el efecto de 2,3

Supongo que te gusta

Origin blog.csdn.net/qq_31745863/article/details/130627531
Recomendado
Clasificación
Diario
Más
2024-05-12(22)
2024-05-11(31)
2024-05-10(32)
2024-05-09(31)
2024-05-08(18)
2024-05-07(35)
2024-05-06(4)
2024-05-05(0)
2024-05-04(17)
2024-05-03(8)

Code World

© 2018 codetd.com