结合高德地图使用antv/l7实现地图自定义marker和popup

vue yekong 722℃

wanjunshijie 2021-04-07 at 16.44.55@2x

引入高度地图

    <script
            type="text/javascript"
            src="https://webapi.amap.com/maps?v=1.4.15&key=4287645405b708067719678082cc4d38"
    ></script>
    <script src="//webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>

安装依赖

    "@antv/l7": "^2.3.9",
    "@antv/l7-maps": "^2.3.9",

实现代码

<template>
  <div id="l7-map" class="allmap"></div>
</template>

<script>
import {Scene, Marker, Popup} from '@antv/l7';
import {GaodeMap} from '@antv/l7-maps';
import AMap from "AMap"
export default {
  name: "map3d",
  components: {},
  props: {
    id: {
      type: String,
      default() {
        return '';
      }
    }
  },
  data() {
    return {
      status: '',
      isRouterAlive: true,
      list: [
        {
          markerPoint: {lng: 116.401, lat: 39.910},
          name: '北京',
          num: '100',
          status: 1,
          show: false,

        }, {
          markerPoint: {lng: 114.48, lat: 38.03},
          name: '河北',
          num: '100',
          status: 1,
          show: false,

        }, {
          markerPoint: {lng: 117.494021, lat: 39.252968},
          name: '天津',
          num: '100',
          status: 1,
          show: false,

        }, {
          markerPoint: {lng: 118.965805, lat: 36.333689},
          name: '山东',
          num: '100',
          status: 1,
          show: false,

        }, {
          markerPoint: {lng: 128.826756, lat: 47.499887},
          name: '黑龙江',
          num: '100',
          status: 1,
          show: false,
        }, {
          markerPoint: {lng: 118.745037, lat: 44.421612},
          name: '内蒙古',
          num: '100',
          status: 1,
          show: false,
        }, {
          markerPoint: {lng: 126.398313, lat: 43.195906},
          name: '吉林',
          num: '100',
          status: 1,
          show: false,
        }, {
          markerPoint: {lng: 122.718853, lat: 41.393098},
          name: '辽宁',
          num: '100',
          status: 1,
          show: false,
        }, {
          markerPoint: {lng: 112.269189, lat: 36.867724},
          name: '山西',
          num: '100',
          status: 1,
          show: false,
        }, {
          markerPoint: {lng: 86.733741, lat: 42.27368},
          name: '新疆',
          num: '100',
          status: 1,
          show: false,
        }, {
          markerPoint: {lng: 103.364897, lat: 30.983269},
          name: '四川',
          num: '100',
          status: 1,
          show: false,
        }, {
          markerPoint: {lng: 109.104854, lat: 23.763631},
          name: '广西',
          num: '100',
          status: 1,
          show: false,
        }, {
          markerPoint: {lng: 114.035329, lat: 23.763631},
          name: '广东',
          num: '100',
          status: 1,
          show: false,
        }, {
          markerPoint: {lng: 118.303502, lat: 26.111966},
          name: '福建',
          num: '100',
          status: 1,
          show: false,
        }, {
          markerPoint: {lng: 121.688605, lat: 30.983269},
          name: '上海',
          num: '100',
          status: 1,
          show: false,
        }, {
          markerPoint: {lng: 117.199664, lat: 32.617286},
          name: '安徽',
          num: '100',
          status: 1,
          show: false,
        }, {
          markerPoint: {lng: 119.480929, lat: 33.484943},
          name: '江苏',
          num: '100',
          status: 1,
          show: false,
        }, {
          markerPoint: {lng: 107.117946, lat: 26.64227},
          name: '贵州',
          num: '100',
          status: 1,
          show: false,
        }, {
          markerPoint: {lng: 112.269189, lat: 31.426061},
          name: '湖北',
          num: '100',
          status: 1,
          show: false,
        }, {
          markerPoint: {lng: 95.711622, lat: 35.915757},
          name: '青海',
          num: '100',
          status: 1,
          show: false,
        }, {
          markerPoint: {lng: 88.279114, lat: 31.489146},
          name: '西藏',
          num: '100',
          status: 1,
          show: false,
        }, {
          markerPoint: {lng: 106.308465, lat: 37.162795},
          name: '宁夏',
          num: '100',
          status: 1,
          show: false,
        },],
      map: null
    }
  },
  watch: {},
  mounted() {
    this.initMap()
  },
  methods: {
    initMap() {
      this.isRouterAlive = true;
      this.map = new AMap.Map('l7-map', {
        viewMode: '3D',
        resizeEnable: true,
        zoom: 4, // 初始化地图层级
        pitch: 50,
        rotation: 0,
        maxZoom: 30,
        minZoom: 0,
        animateEnable: true,
        scrollWheel: true,
        mapStyle: 'amap://styles/blue',
        features: ['bg', 'road', 'building'],
        center: [105.404, 28.915], // 初始化地图中心点
      });
      const scene = new Scene({
        id: 'l7-map',
        map: new GaodeMap({
          mapInstance: this.map
        })
      });
      scene.on('loaded', () => {
        let data = this.list;
        for (var i = 0; i < data.length; i++) {
          const popup = new Popup({offsets: [0, 20]}).setHTML('<p>名称:' + data[i].name + i + '</p><br><p>车位数:100</p><br><p>是否支持电子支付:是</p>');
          var el = document.createElement('label');
          el.className = 'labelclass';
          el.textContent = 'cs';
          el.style.background = 'red';
          const marker = new Marker(
              {color: '#e92c2c', element: el, offsets: [-20, -20]}
          )
              .setLnglat([data[i].markerPoint.lng, data[i].markerPoint.lat]).setPopup(popup);
          scene.addMarker(marker);
        }
      });
    }
  }
}
</script>

<style lang="scss">
.allmap {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: -1;
}

.l7-marker {
  svg {
    width: 30px;
    height: 30px;
    color: #e92c2c;
  }
}

.l7-popup-tip, .l7-popup-close-button {
  display: none;
}

.l7-popup-content {
  padding: 15px;
  height: auto !important;
  -webkit-transition: all .35s ease-out;
  transition: all .35s ease-out;
  background: -webkit-gradient(linear, right top, left top, from(#77f0ff), to(#77f0ff)) 0 0 no-repeat, -webkit-gradient(linear, left top, left bottom, from(#77f0ff), to(#77f0ff)) 0 0 no-repeat, -webkit-gradient(linear, right top, left top, from(#77f0ff), to(#77f0ff)) 100% 0 no-repeat, -webkit-gradient(linear, left top, left bottom, from(#77f0ff), to(#77f0ff)) 100% 0 no-repeat, -webkit-gradient(linear, right top, left top, from(#77f0ff), to(#77f0ff)) 0 100% no-repeat, -webkit-gradient(linear, left top, left bottom, from(#77f0ff), to(#77f0ff)) 0 100% no-repeat, -webkit-gradient(linear, right top, left top, from(#77f0ff), to(#77f0ff)) 100% 100% no-repeat, -webkit-gradient(linear, right top, left top, from(#77f0ff), to(#77f0ff)) 100% 100% no-repeat rgba(0, 6, 20, .7) !important;
  background: linear-gradient(
          270deg, #77f0ff, #77f0ff) 0 0 no-repeat, linear-gradient(
          180deg, #77f0ff, #77f0ff) 0 0 no-repeat, linear-gradient(
          270deg, #77f0ff, #77f0ff) 100% 0 no-repeat, linear-gradient(
          180deg, #77f0ff, #77f0ff) 100% 0 no-repeat, linear-gradient(
          270deg, #77f0ff, #77f0ff) 0 100% no-repeat, linear-gradient(
          180deg, #77f0ff, #77f0ff) 0 100% no-repeat, linear-gradient(
          270deg, #77f0ff, #77f0ff) 100% 100% no-repeat, linear-gradient(
          270deg, #77f0ff, #77f0ff) 100% 100% no-repeat rgba(0, 6, 20, .7) !important;
  background-size: 2px 9px, 9px 2px, 2px 9px, 9px 2px !important;
  border: 1px solid #004566 !important;
  -webkit-box-shadow: inset 0 0 20px 0 #004566 !important;
  box-shadow: inset 0 0 15px 0 #004566 !important;

  p {
    line-height: 15px;
    color: #77f0ff;
    min-width: 150px;
  }
}
.labelclass {
  background: url("../assets/dituicon.png") no-repeat !important;
  width: 18px;
  height: 28px;
  font-size: 0 !important;
}
</style>

喜欢 (0)