Vue2-腾讯地图--地图标记

腾讯地图–地图标记

前期准备工作在腾讯地图--地图展示 一文中即可查看

带有显示多个标记与图文标记

<template>
  <div class="container">
    <el-button type="primary" @click="MultipleMark">显示多个标记</el-button>
    <el-button type="primary" @click="text">图文标记</el-button>
    <!-- 地图容器 -->
    <div id="map-mark"></div>
  </div>
</template>

<script>
export default {
  data(){
    return{
      map:null,
      longitude:39.916527,//经度
      latitude:116.397128,//纬度
    }
  },
  created(){
    
  },
  mounted(){
    this.initMap()
  },
  methods:{
    initMap(){
      this.map = new window.TMap.Map(document.getElementById('map-mark'), {
          center: new window.TMap.LatLng(this.longitude, this.latitude),//设置地图中心点坐标
          zoom: 10,   //设置地图缩放级别
          pitch: 43.5,  //设置俯仰角
          rotation: 45    //设置地图旋转角度
      });
      // 标记
      this.mark()
    },
    // 标记
    mark(arr){
      var geo = [
        {
          // id: '1',
          styleId: 'myStyle',
          position:new window.TMap.LatLng(this.longitude, this.latitude), // 点标记的坐标位置
        }
      ]
      if(arr){
        arr.forEach(item=>{
          geo.push({
            // id: item.id ? item.id + '' : '1',
            styleId: item.styleId ? item.styleId : 'myStyle',  // 指定样式id
            position: new window.TMap.LatLng(item.longitude, item.latitude),  // 点标记的坐标位置
            content: item.text ? item.text : ''
          })
        })
      }
      // 标记
      new window.TMap.MultiMarker({
        // 标记的位置
        map: this.map,
        // 设置点标记样式
        styles:{
          'myStyle':new window.TMap.MarkerStyle({
            //图片样式配置参数
            // src: require('../../assets/tengxun/定位.png'),  //图片路径
            width: 25, //图片宽度（单位为像素，默认为图片原宽度）
            height: 35, //图片高度（单位为像素，默认为图片原高度）
            opacity: 0.9, //图片透明度（默认为1，保持原透明度）
            // faceTo: 'map', //图片保持贴地（默认图片直立朝向屏幕）
            //文字样式配置参数
            size: 16, //文字大小
            color: '#007ACC', //文字颜色
            strokeWidth: 2, //文字描边宽度
            strokeColor: '#fff', //文字描边颜色
            direction: 'top', //文字相对于图片的位置
          }),
        },
        // 点标记数据数组
        geometries: geo
      })
    },
    // 显示多个标记
    MultipleMark(){
      var lang = [  // 再加两个坐标(坐标乱写的)
        {id:2,longitude:39.994104,latitude:116.287503},
        {id:3,longitude:39.954104,latitude:116.357503}
      ]
      this.mark(lang)
    },
    // 图文标记
    text(){
      var lang = [  // 再加两个坐标(坐标乱写的)
        {id:2,longitude:39.994104,latitude:116.287503,text:'标记点一'},
        {id:3,longitude:39.954104,latitude:116.357503,text:'标记点二'}
      ]
      this.mark(lang)
    },
  }
}
</script>

<style>

</style>

运行展示