Vue高德地图实现地图标点

下载依赖

npm i @amap/amap-jsapi-loader --save-dev

创建组件

创建一个文件GaodeMap.vue

<template>
  <div>
    <div id="container"></div>
  </div>
</template>

<script>
  import AMapLoader from '@amap/amap-jsapi-loader';

  export default {
    name: "GaodeMap",
    props: {
      startPoint: {
        type: Array,
        default: () => []
      },
      endPoint: {
        type: Array,
        default: () => []
      }
    },
    emits: ['pointsSelected'],
    data () {
      return {
        map: null,
        startMarker: null,
        endMarker: null,
        currentPosition: null,
        isMarkingStart: true,
        polyline: null,
        driving: null
      };
    },
    methods: {
      initMap () {
        this.getCurrentPosition().then((position) => {
          this.currentPosition = position;
          AMapLoader.reset()
          AMapLoader.load({
            key: "高德key",
            version: "2.0",
            plugins: ['AMap.ToolBar', 'AMap.Scale', 'AMap.HawkEye', 'AMap.Driving']
          }).then((AMap) => {
            this.map = new AMap.Map("container", {
              viewMode: "3D",
              zooms: [4, 18],
              zoom: 16,
              center: this.currentPosition
            });

            this.map.addControl(new AMap.ToolBar());
            this.map.addControl(new AMap.Scale());
            this.map.addControl(new AMap.HawkEye());

            this.driving = new AMap.Driving({
              map: this.map
            });

            if (this.startPoint.length > 0 && this.endPoint.length > 0) {
              this.setMarkers(AMap, this.startPoint, this.endPoint);
            }

            this.map.on('dblclick', (e) => {
              this.handleDoubleClick(e, AMap);
            });
          }).catch((e) => {
            console.log(e);
          });
        }).catch((error) => {
          console.error('获取当前位置失败:', error);
          this.initMapWithDefaultCenter();
        });
      },
      getCurrentPosition () {
        return new Promise((resolve, reject) => {
          if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(
              (position) => {
                const { longitude, latitude } = position.coords;
                resolve([longitude, latitude]);
              },
              (error) => {
                reject(error);
              }
            );
          } else {
            reject(new Error('浏览器不支持地理定位'));
          }
        });
      },
      initMapWithDefaultCenter () {
        AMapLoader.load({
          key: "高德的key",
          version: "2.0",
          plugins: ['AMap.ToolBar', 'AMap.Scale', 'AMap.HawkEye', 'AMap.Driving']
        }).then((AMap) => {
          this.map = new AMap.Map("container", {
            viewMode: "3D",
            zooms: [4, 18],
            zoom: 16,
            center: [105.602725, 37.076636]
          });

          this.map.addControl(new AMap.ToolBar());
          this.map.addControl(new AMap.Scale());
          this.map.addControl(new AMap.HawkEye());

          this.driving = new AMap.Driving({
            map: this.map
          });

          if (this.startPoint.length > 0 && this.endPoint.length > 0) {
            this.setMarkers(AMap, this.startPoint, this.endPoint);
                            }

        this.map.on('dblclick', (e) => {
          this.handleDoubleClick(e, AMap);
        });
      }).catch((e) => {
        console.log(e);
      });
    },
    setMarkers (AMap, start, end) {
      if (this.startMarker) {
        this.startMarker.setMap(null);
      }
      this.startMarker = new AMap.Marker({
        position: start,
        title: '起点',
        icon: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png'
      });
      this.startMarker.setMap(this.map);

      if (this.endMarker) {
        this.endMarker.setMap(null);
      }
      this.endMarker = new AMap.Marker({
        position: end,
        title: '终点',
        icon: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_r.png'
      });
      this.endMarker.setMap(this.map);

      this.getDrivingRoute(AMap);
    },
    handleDoubleClick (e, AMap) {
      const point = [e.lnglat.getLng(), e.lnglat.getLat()];
      if (this.isMarkingStart) {
        if (this.startMarker) {
          this.startMarker.setMap(null);
        }
        this.startMarker = new AMap.Marker({
          position: point,
          title: '起点',
          icon: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png'
        });
        this.startMarker.setMap(this.map);
        this.isMarkingStart = false;

        if (this.polyline) {
          this.polyline.setMap(null);
          this.polyline = null;
        }
      } else {
        if (this.endMarker) {
          this.endMarker.setMap(null);
        }
        this.endMarker = new AMap.Marker({
          position: point,
          title: '终点',
          icon: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_r.png'
        });
        this.endMarker.setMap(this.map);
        this.isMarkingStart = true;

        this.getDrivingRoute(AMap);
        const start = this.startMarker.getPosition();
        const end = this.endMarker.getPosition();
        const startPoint = [start.getLng(), start.getLat()];
        const endPoint = [end.getLng(), end.getLat()];
        this.$emit('pointsSelected', { startPoint, endPoint });
      }
    },
    getDrivingRoute (AMap) {
      if (this.startMarker && this.endMarker) {
        const startPoint = this.startMarker.getPosition();
        const endPoint = this.endMarker.getPosition();

        console.log(startPoint);
        console.log(endPoint);

        this.driving.search(startPoint, endPoint, (status, result) => {
          if (status === 'complete' && result.info === 'OK') {
            const path = result.routes[0].path;
            const pathCoords = path.map((p) => [p.lng, p.lat]);

            if (this.polyline) {
              this.polyline.setMap(null);
            }

            this.polyline = new AMap.Polyline({
              path: pathCoords,
              strokeColor: "#FF33FF",
              strokeWeight: 2,
              strokeOpacity: 1,
              strokeStyle: "solid"
            });
            this.polyline.setMap(this.map);
          } else {
            console.error('获取驾车路线失败:', result);
          }
        });
      }
    }
  },
  mounted () {
    this.initMap();
  }
}
</script>

<style scoped>
#container {
  width: 100%;
  height: 100vh;
  border: 1px solid red;
}
</style>

引入组件

在使用的地方引入

<gaode-map :startPoint="savedStartPoint" :endPoint="savedEndPoint"
          @pointsSelected="handlePointsSelected"></gaode-map>

script导入

import GaodeMap from '@/components/GaodeMap.vue'
export default {
  data () {
    return {
      savedStartPoint: [],
      savedEndPoint: [],
      ruleFoem:{
        startPoint:'',
        endPoint:''
      }
    };
  },
  components: {
    GaodeMap,
  },
  methods:{
  handlePointsSelected ({ startPoint, endPoint }) {
      this.ruleForm.startPoint = JSON.stringify(startPoint);
      this.ruleForm.endPoint = JSON.stringify(endPoint);
    },
  };
}