vue 腾讯地图（多个坐标，坐标选中效果）

vue 腾讯地图（多个坐标，坐标选中效果）

封装成组件 map.vue

<template>
  <div class="locationMap">
    <div id="container"
         ref="mapContainer"></div>
    <div v-show="loading"
         class="loading">
      <van-loading color="#07c160">地图加载中...</van-loading>
    </div>
  </div>
</template>

<script>
//坐标显示的样式
import Icon from '../../../public/images/Icon.png'
import Icon2 from '../../../public/images/Icon2.png'
export default {
  name: 'locationMap',
  props: { mapObj: Array },
  data() {
    return {
      Icon,
      Icon2,
      map: null,
      marker: null,
      loading: true,
    }
  },
  methods: {
    // 初始化地图
    initMap() {
      Map().then((TMap) => {
        this.loading = false
        //初始化位置
        let lat = this.mapObj[0].lat
        let lng = this.mapObj[0].lng
        let center = new TMap.LatLng(lat, lng)
        let markerList = []
        this.mapObj.map((item) => {
          let lat = item.lat
          let lng = item.lng
          let center = new TMap.LatLng(lat, lng)
       
            markerList.push({
              id: item.id, //点标记唯一标识，后续如果有删除、修改位置等操作，都需要此id
              styleId: ['Icon'], //指定样式id
              position: center, //点标记坐标位置
              properties: {
                //自定义属性
                id: item.id,
                name: item.name,
              },
              content: item.name,
            })
        })
        this.map = new TMap.Map(this.$refs.mapContainer, {
          //地图的中心地理坐标
          center,
          zoom: 16,
          disableDefaultUI: true,
        })
        //缩放控件
        let control = this.map.getControl(
          TMap.constants.DEFAULT_CONTROL_ID.ZOOM
        )
        //删除缩放控件
        // this.map.removeControl(TMap.constants.DEFAULT_CONTROL_ID.ZOOM)
        //缩放控件左上角
        control.setPosition(TMap.constants.CONTROL_POSITION.TOP_LEFT)
        //创建并初始化MultiMarker
        this.marker = new TMap.MultiMarker({
          map: this.map, //指定地图容器
          //样式定义
          styles: {
            //创建一个styleId为"myStyle"的样式（styles的子属性名即为styleId）
            Icon: new TMap.MarkerStyle({
              width: 32, // 点标记样式宽度（像素）
              height: 35, // 点标记样式高度（像素）
              anchor: { x: 16, y: 32 },
              src: Icon,
            }),
            Icon2: new TMap.MarkerStyle({
              width: 32, // 点标记样式宽度（像素）
              height: 35, // 点标记样式高度（像素）
              anchor: { x: 16, y: 32 },
              src: Icon2,
            }),
          },
          //点标记数据数组
          geometries: markerList,
        })
        //默认选中效果
          this.marker.updateGeometries([
            {
              styleId:Icon2,
              id: this.mapObj[0].id,
              position: center,
              properties:
                {
                    //自定义属性
                      id: this.mapObj[0].id,
                      name: this.mapObj[0].name,
                 },
              content: this.mapObj[0].name,
            },
          ])
        }
        this.loading = false
        // 初始化infoWindow
        if (this.showType != 'my') {
          var infoWindow = new TMap.InfoWindow({
            map: this.map,
            position: new TMap.LatLng(lat, lng),
            content: this.mapObj[0].name,
            offset: { x: 0, y: -32 }, //设置信息窗相对position偏移像素
          })
          // infoWindow.close() //初始关闭信息窗关闭
          //监听标注点击事件
          let that = this
          this.marker.on('click', function (evt) {
              //设置infoWindow
              infoWindow.open() //打开信息窗
              infoWindow.setPosition(evt.geometry.position) //设置信息窗位置
              infoWindow.setContent(evt.geometry.properties.name) //设置信息窗内容
              this.map.panTo(evt.latLng)//移动到所选的位置
             //选中数据传入父组件
              that.$emit('selectInfo', evt.geometry.properties)
              //选中效果
              that.mapObj.map((item) => {
                let lat = item.lat
                let lng = item.lng
                let center = new TMap.LatLng(lat, lng)
                  that.marker.updateGeometries([
                    {
                      styleId:
                        item.id === evt.geometry.id
                          ? 'Icon2'
                          : 'Icon',
                      id: item.id,
                      position: center,
                      properties: {
                        //自定义属性
                        id: item.id,
                        name: item.name,
                      },
                      content: item.name,
                    },
                  ])
              }) 
          })
        }
      })
    },
  },
  mounted() {
    this.initMap()
  },
}
</script>

<style scoped>
.locationMap {
  width:500px;
}
.loading {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
#container {
  width: 500px;
  min-width: 500px;
  max-width: 500px;
  height: 100vh;
  max-height: 100vh;
}
#container .smnoprint {
  display: none;
}
</style>

调用组件

  <Map :mapObj="mapObj"
        @selectInfo="selectInfo" />

实现效果