首次高德地图自定义marker并清除marker,都是借鉴各位前辈的代码,然后融合了好多案例,感谢各位前辈

import * as THREE from 'three'   
// 第二步:初始化地图+数据获取更新
import AMapLoader from '@amap/amap-jsapi-loader'
// 设置安全密钥
window._AMapSecurityConfig = {
  securityJsCode: '高德申请的key', //设置高德安全密钥,通过该秘钥获取高德数据
}

data(){
    return {
    map: null,
    markers: null,
    maps: null,
     list: [
        {
          position: [119.980915962, 30.520096745],
          id: 1,
          icon: require('../assets/icon_btk41kc4q9m/Bus.png'),
        },
        {
          position: [119.980765934, 30.520356359],
          id: 2,
          icon: require('../assets/icon_btk41kc4q9m/huoche.png'),
        },
        {
          position: [119.98076323, 30.520416141],
          id: 3,
          icon: require('../assets/icon_btk41kc4q9m/icon--feijidongche.png'),
        },
        {
          position: [119.980607093, 30.520382286],
          id: 4,
          icon: require('../assets/icon_btk41kc4q9m/qiche.png'),
        },
        {
          position: [120.980608093, 30.520382286],
          id: 5,
          icon: require('../assets/icon_btk41kc4q9m/Bus.png'),
        },
      ],
}
}


  mounted() {
      this.initMap() //初始化地图
      this.maps.clearMap(this.markers)//我的需求是写在定时器里,定时清除图标,然后重新展示新图标

  },

 initMap() {
      //初始化地图
      AMapLoader.load({
        key: '4e6ba029956ccb2e22f28fb782008a94',
        version: '2.0',
        plugins: ['AMap.Scale', 'AMap.MouseTool'], // 需要使用的的插件列表,如比例尺'AMap.Scale'等
      })
        .then((AMap) => {
          // 初始化地图
          //this.maps = this.map
        this.map = new AMap.Map('container', {
            viewMode: '3D',
            zoom: 22,
            plugins: [''],
            center: this.firstArr, //[119.980915962, 30.520096745]
            resizeEnable: true,
          })
          this.maps = this.map
          this.initMarker(AMap)
        })
        .catch((e) => {
          console.log(e)
        })
    },
       // 定义图标
      initMarker(AMap) {
      this.list.forEach((item) => {
        var IconImg = new AMap.Icon({
          // 图标尺寸
          size: new AMap.Size(80, 40),
          // 图标的取图地址
          // image: require('../assets/icon_btk41kc4q9m/Bus.png'),
          image: item.icon,
          // 图标所用图片大小
          imageSize: new AMap.Size(40, 20),
          // imageSize: new AMap.Size(80, 40),
          // 图标取图偏移量
          // imageOffset: new AMap.Pixel(-9, -3)
        })
        //this.markers = this.marker
      this.marker = new AMap.Marker({
          map: this.map,
          // position: this.pereptionInfoList.map(item => [item.longitude,item.latitude])[0],
          // position: [119.980915962, 30.520096745],
          position: item.position,
          // position: new AMap.LngLat(119.980915962, 30.520096745),
          icon: IconImg,
          offset: new AMap.Pixel(-35, -15), //调整图片偏移
          // offset: new AMap.Pixel(-56, -30), //调整图片偏移
          // autoRotation: true, //自动旋转
          // angle: -90 //图片旋转角度
        })
        this.markers = this.marker
        //多点文本标记 longitude:经度   30.621637
        this.marker.setLabel({
          offset: new AMap.Pixel(10, 10), //设置文本标注偏移量
          // content: "
我是 marker 的 label 标签
", //设置文本标注内容 content: item.id, //设置文本标注内容 direction: 'top', //设置文本标注方位 }) }) },

你可能感兴趣的:(javascript,前端,html)