高德地图使用

解释：高德地图的使用方法，无封装的组件

使用地图组件需要先到 高德地图官网 创建应用获取 Key ，然后可以在 App.vue 中全局配置：

1.引入插件

import EleMapPicker from 'ele-admin-pro/packages/ele-map-picker';

2.注册

components: {  EleMapPicker},

3.使用
     

<a-form-item label="地址" name="address">
<a-input v-model:value="form.address" placeholder="请输入地址" allow-clear autocomplete="off" >
    <template #suffix>
      <a-button type="primary" @click="addressChange(0)">获取详细地址</a-button>
     </template>
   </a-input>
 </a-form-item> 

<a-form-item label="地址" name="insuredAddress">
 <a-input v-model:value="form.insuredAddress" placeholder="请输入地址" allow-clear autocomplete="off">
  <template #suffix>
  <a-button type="primary" @click="addressChange(1)">获取详细地址</a-button>
    </template>
     </a-input>
    </a-form-item>

     addressFlag:0,
    //1.控制地图显示隐藏
      visibles: false,

   //这个点击获取地址传参，根据值不同回显不同的输入框
    addressChange(addressFlag){
      console.log(addressFlag);
      this.addressFlag=addressFlag;
      this.visibles=true;
    },

 onDone(result) {
      if(this.addressFlag == 0){
          this.form.address = result.city.province + result.city.district + result.address+result.name;
      }else{
      this.form.insuredAddress = result.city.province + result.city.district + result.address+result.name;
      }

      this.visibles = false;
    },

直接使用地图

<template>
    <div ref="locationMapRef" style="height: 360px;max-width: 1000px;"></div>
</template>

<script lang="ts" setup>
    import { ref, onMounted, onUnmounted } from 'vue';
    import AMapLoader from '@amap/amap-jsapi-loader';
    
    //
    const locationMapRef = ref<HTMLElement | null>(null);
    
    // 官网底部地图的实例
    let mapInsLocation: any;
    
    /* 渲染官网底部地图 */
    const renderLocationMap = () => {
        AMapLoader.load({
            key: '申请好的Web端开发者Key',
            version: '2.0',
            plugins: ['AMap.InfoWindow', 'AMap.Marker']
        }).then((AMap) => {
            // 渲染地图
            const option = {
              zoom: 13, // 初缩放级别
              center: [114.346084, 30.511215 + 0.005] // 初始中心点
            };
            mapInsLocation = new AMap.Map(locationMapRef.value, option);
            // 创建信息窗体
            const infoWindow = new AMap.InfoWindow({
                content: `
                    <div style="color: #333;">
                      <div style="padding: 5px;font-size: 16px;">武汉易云智科技有限公司</div>
                      <div style="padding: 0 5px;">地址：湖北省武汉市洪山区雄楚大道222号</div>
                      <div style="padding: 0 5px;">电话：020-123456789</div>
                    </div>
                    <a
                      class="ele-text-primary"
                      style="padding: 8px 5px 0;text-decoration: none;display: inline-block;"
                      href="//uri.amap.com/marker?position=114.346084,30.511215&name=武汉易云智科技有限公司"
                      target="_blank">到这里去→
                    </a>
                    `
            });
            infoWindow.open(mapInsLocation, [114.346084, 30.511215]);
            const icon = new AMap.Icon({
                size: new AMap.Size(25, 34),
                image: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-red.png',
                imageSize: new AMap.Size(25, 34)
            });
            const marker = new AMap.Marker({
                icon: icon,
                position: [114.346084, 30.511215],
                offset: new AMap.Pixel(-12, -28)
            });
            marker.setMap(mapInsLocation);
            marker.on('click', () => {
                infoWindow.open(mapInsLocation);
            });
        }).catch((e) => {
            console.error(e);
        });
    };
    
    /* 渲染地图 */
    onMounted(() => {
        renderLocationMap();
    });
    
    /* 销毁地图 */
    onUnmounted(() => {
        if (mapInsLocation) {
            mapInsLocation.destroy();
        }
    });
</script>

实现地图轨迹会放

 

<template>
    <div ref="trackMapRef" style="height: 360px;max-width: 1000px;margin-bottom: 16px;"></div>
    <a-button type="primary" @click="startTrackAnim">开始动画</a-button>
    <a-button type="primary" @click="pauseTrackAnim">暂停动画</a-button>
    <a-button type="primary" @click="resumeTrackAnim">继续动画</a-button>
</template>

<script lang="ts" setup>
    import { ref, onMounted, onUnmounted } from 'vue';
    import AMapLoader from '@amap/amap-jsapi-loader';
    
    //
    const trackMapRef = ref<HTMLElement | null>(null);
    
    // 小车轨迹地图的实例
    let mapInsTrack: any;
    
    // 小车的marker
    let carMarker: any;
    
    // 轨迹路线
    const lineData = [
        [116.478935, 39.997761],
        [116.478939, 39.997825],
        [116.478912, 39.998549],
        [116.478912, 39.998549],
        [116.478998, 39.998555],
        [116.478998, 39.998555],
        [116.479282, 39.99856],
        [116.479658, 39.998528],
        [116.480151, 39.998453],
        [116.480784, 39.998302],
        [116.480784, 39.998302],
        [116.481149, 39.998184],
        [116.481573, 39.997997],
        [116.481863, 39.997846],
        [116.482072, 39.997718],
        [116.482362, 39.997718],
        [116.483633, 39.998935],
        [116.48367, 39.998968],
        [116.484648, 39.999861]
    ];
    
    /* 渲染轨迹回放地图 */
    const renderTrackMap = () => {
        AMapLoader.load({
            key: '申请好的Web端开发者Key',
            version: '2.0',
            plugins: ['AMap.MoveAnimation', 'AMap.Marker', 'AMap.Polyline']
        }).then((AMap) => {
            // 渲染地图
            const option = {
                zoom: 17,
                center: [116.478935, 39.997761]
            };
            mapInsTrack = new AMap.Map(trackMapRef.value, option);
            // 创建小车marker
            carMarker = new AMap.Marker({
                map: mapInsTrack,
                position: [116.478935, 39.997761],
                icon: 'https://a.amap.com/jsapi_demos/static/demo-center-v2/car.png',
                offset: new AMap.Pixel(-13, -26)
            });
            // 绘制轨迹
            new AMap.Polyline({
                map: mapInsTrack,
                path: lineData,
                showDir: true,
                strokeColor: '#2288FF', // 线颜色
                strokeOpacity: 1, // 线透明度
                strokeWeight: 6 // 线宽
                //strokeStyle: 'solid'  // 线样式
            });
            // 通过的轨迹
            const passedPolyline = new AMap.Polyline({
                map: mapInsTrack,
                showDir: true,
                strokeColor: '#44BB55', // 线颜色
                strokeOpacity: 1, // 线透明度
                strokeWeight: 6 // 线宽
            });
            // 小车移动回调
            carMarker.on('moving', (e) => {
                passedPolyline.setPath(e.passedPath);
            });
            // 地图自适应
            mapInsTrack.setFitView();
        }).catch((e) => {
            console.error(e);
        });
    };
    
    /* 开始轨迹回放动画 */
    const startTrackAnim = () => {
        if (carMarker) {
            carMarker.stopMove();
            carMarker.moveAlong(lineData, {
                duration: 200,
                autoRotation: true
            });
        }
    };
    
    /* 暂停轨迹回放动画 */
    const pauseTrackAnim = () => {
        if (carMarker) {
            carMarker.pauseMove();
        }
    };
    
    /* 继续开始轨迹回放动画 */
    const resumeTrackAnim = () => {
        if (carMarker) {
            carMarker.resumeMove();
        }
    };
    
    /* 渲染地图 */
    onMounted(() => {
        renderTrackMap();
    });
    
    /* 销毁地图 */
    onUnmounted(() => {
        if (mapInsTrack) {
            mapInsTrack.destroy();
        }
    });
</script>