vue使用vue-amap让标注始终位于屏幕中心点

// 使用npm下载
npm install vue-amap --save 

// 新建amap.js 且输入下面代码
import Vue from 'vue';
import VueAMap from 'vue-amap';
Vue.use(VueAMap);
// 初始化vue-amap
if (!Vue.prototype.$isServer) {
  VueAMap.initAMapApiLoader({
    // 高德的key
    key: '',
    // 插件集合
    plugin: ['AMap.Geolocation', 'AMap.Marker', 'AMap.ToolBar', 'AMap.Circle', 'AMap.PolyLine'],
    uiVersion: '1.0',
    // 高德 sdk 版本,默认为 1.4.4
    v: '1.4.8'
  });
}

// 需要使用的地方
      <section style="width: 100%; height: 100%">
        <no-ssr>
          <el-amap
            vid="amap"
            :zoom="zoom"
            class="amap-demo"
            :center="center"
            :events="events"
          >
            <el-amap-marker :position="centericon" />
          </el-amap>
        </no-ssr>
      </section>
      export default {
  data() {
    let self = this
    return {
      zoom: 18,
      center: [121.435821, 29.313501],// 显示在地图中心点位置
      centericon: [121.432821, 29.313501],// 标注位置经纬度
      events: {
        init(map) {
          let markers = _.cloneDeep(self.markers)
          markers.forEach((item, index) => {
            AMapUI.loadUI(['overlay/SimpleMarker'], function(SimpleMarker) {
              item = new SimpleMarker({
                iconLabel: {
                  innerHTML: index,
                  style: {
                    color: '#fff',
                  },
                },
                iconStyle: '#1995f5',
                map: map,
                position: item.position,
              })
            })
          })
          self.center = self.lnglat2container(self.centericon, map)// 获取标注位置进而调用方法换算出屏幕位置
          self.Map = map// 由于业务逻辑  需要切换位置  所以把map赋值
          // self.center = self.lnglat2container(self.center, map)
        },
      },
      Map: null,
      markers: [],
    }
  },
  methods: {
    // 换算位置  转化中心点坐标
    lnglat2container(conter, map) {
      console.log(map)
      var lnglat = new AMap.LngLat(conter[0], conter[1])
      var pixel = map.lngLatToContainer(lnglat)
      pixel.x += window.innerWidth / 4
      var lng = map.containerToLngLat(pixel)
      return [lng.lng, lng.lat]
    },

    // 定位到具体位置
    location(lag, lat) {
      this.centericon = [lag, lat]
      this.center = this.lnglat2container(this.centericon, this.Map)
      // this.center = this.centericon// 修改center显示区域位置
    },

}
</script>


版权声明:本文为weixin_48280939原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。